@studiometa/js-toolkit 2.9.0 → 2.10.0

package/helpers/createApp.js

@@ -8,26 +8,27 @@ function createApp(App, rootElement = document.body) {
       features.set(feature, value);
     });
   }
-  const p = new Promise((resolve) => {
-    const callback = () => {
-      setTimeout(() => {
-        app = new App(options.root).$mount();
-        resolve(app);
-      }, 0);
-    };
-    if (features.get("asyncChildren") || document.readyState === "complete") {
-      callback();
-    } else {
-      document.addEventListener("readystatechange", () => {
-        if (document.readyState === "complete") {
-          callback();
-        }
-      });
-    }
-  });
-  return function useApp() {
-    return p;
-  };
+  function init() {
+    app = new App(options.root).$mount();
+    return app;
+  }
+  let p;
+  if (features.get("asyncChildren")) {
+    p = Promise.resolve(init());
+  } else {
+    p = new Promise((resolve) => {
+      if (document.readyState === "complete") {
+        resolve(init());
+      } else {
+        document.addEventListener("readystatechange", () => {
+          if (document.readyState === "complete") {
+            resolve(init());
+          }
+        });
+      }
+    });
+  }
+  return () => p;
 }
 export {
   createApp as default

package/helpers/createApp.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/createApp.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Features;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    Object.entries(options.features).forEach(([feature, value]) => {\n      features.set(feature as keyof Features, value);\n    });\n  }\n\n  const p: Promise<S & Base<T>> = new Promise((resolve) => {\n    const callback = () => {\n      setTimeout(() => {\n        app = (new App(options.root) as S & Base<T>).$mount();\n        resolve(app);\n      }, 0);\n    };\n\n    if (features.get('asyncChildren') || document.readyState === 'complete') {\n      callback();\n    } else {\n      document.addEventListener('readystatechange', () => {\n        if (document.readyState === 'complete') {\n          callback();\n        }\n      });\n    }\n  });\n\n  return function useApp() {\n    return p;\n  };\n}\n"],
-  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAWX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,MAAI,UAAU,QAAQ,QAAQ,GAAG;AAC/B,WAAO,QAAQ,QAAQ,QAAQ,EAAE,QAAQ,CAAC,CAAC,SAAS,KAAK,MAAM;AAC7D,eAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,QAAM,IAA0B,IAAI,QAAQ,CAAC,YAAY;AACvD,UAAM,WAAW,MAAM;AACrB,iBAAW,MAAM;AACf,cAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,gBAAQ,GAAG;AAAA,MACb,GAAG,CAAC;AAAA,IACN;AAEA,QAAI,SAAS,IAAI,eAAe,KAAK,SAAS,eAAe,YAAY;AACvE,eAAS;AAAA,IACX,OAAO;AACL,eAAS,iBAAiB,oBAAoB,MAAM;AAClD,YAAI,SAAS,eAAe,YAAY;AACtC,mBAAS;AAAA,QACX;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,SAAS,SAAS;AACvB,WAAO;AAAA,EACT;AACF;",
+  "sourcesContent": ["import type { Base, BaseConstructor, BaseProps } from '../Base/index.js';\nimport type { Features } from '../Base/features.js';\nimport { features } from '../Base/features.js';\nimport { isDefined } from '../utils/index.js';\n\nexport type CreateAppOptions = {\n  root: HTMLElement;\n  features: Features;\n};\n\n/**\n * Instantiate and mount the given component on the given root element when the page has been loaded\n * and return a function to use the app instance when it is ready.\n */\nexport default function createApp<S extends BaseConstructor<Base>, T extends BaseProps = BaseProps>(\n  App: S,\n  rootElement: HTMLElement | Partial<CreateAppOptions> = document.body,\n): () => Promise<S & Base<T>> {\n  let app: S & Base<T>;\n  const options =\n    rootElement instanceof HTMLElement\n      ? { root: rootElement, features: undefined }\n      : { root: document.body, ...rootElement };\n\n  if (isDefined(options.features)) {\n    Object.entries(options.features as Features).forEach(([feature, value]) => {\n      features.set(feature as keyof Features, value);\n    });\n  }\n\n  function init() {\n    app = (new App(options.root) as S & Base<T>).$mount();\n    return app;\n  }\n\n  let p: Promise<S & Base<T>>;\n\n  if (features.get('asyncChildren')) {\n    p = Promise.resolve(init());\n  } else {\n    p = new Promise<S & Base<T>>((resolve) => {\n      if (document.readyState === 'complete') {\n        resolve(init());\n      } else {\n        document.addEventListener('readystatechange', () => {\n          if (document.readyState === 'complete') {\n            resolve(init());\n          }\n        });\n      }\n    });\n  }\n\n  return () => p;\n}\n"],
+  "mappings": "AAEA,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAWX,SAAR,UACL,KACA,cAAuD,SAAS,MACpC;AAC5B,MAAI;AACJ,QAAM,UACJ,uBAAuB,cACnB,EAAE,MAAM,aAAa,UAAU,OAAU,IACzC,EAAE,MAAM,SAAS,MAAM,GAAG,YAAY;AAE5C,MAAI,UAAU,QAAQ,QAAQ,GAAG;AAC/B,WAAO,QAAQ,QAAQ,QAAoB,EAAE,QAAQ,CAAC,CAAC,SAAS,KAAK,MAAM;AACzE,eAAS,IAAI,SAA2B,KAAK;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,WAAS,OAAO;AACd,UAAO,IAAI,IAAI,QAAQ,IAAI,EAAkB,OAAO;AACpD,WAAO;AAAA,EACT;AAEA,MAAI;AAEJ,MAAI,SAAS,IAAI,eAAe,GAAG;AACjC,QAAI,QAAQ,QAAQ,KAAK,CAAC;AAAA,EAC5B,OAAO;AACL,QAAI,IAAI,QAAqB,CAAC,YAAY;AACxC,UAAI,SAAS,eAAe,YAAY;AACtC,gBAAQ,KAAK,CAAC;AAAA,MAChB,OAAO;AACL,iBAAS,iBAAiB,oBAAoB,MAAM;AAClD,cAAI,SAAS,eAAe,YAAY;AACtC,oBAAQ,KAAK,CAAC;AAAA,UAChB;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,MAAM;AACf;",
   "names": []
 }

package/helpers/getInstanceFromElement.cjs

@@ -23,7 +23,7 @@ __export(getInstanceFromElement_exports, {
 });
 module.exports = __toCommonJS(getInstanceFromElement_exports);
 function getInstanceFromElement(element, Constructor) {
-  if (!element.__base__ || !element.__base__.has(Constructor)) {
+  if (!element || !element.__base__ || !element.__base__.has(Constructor)) {
     return null;
   }
   return element.__base__.get(Constructor);

package/helpers/getInstanceFromElement.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/getInstanceFromElement.ts"],
-  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/index.js';\n\n/**\n * Get a component instance from a DOM element.\n */\nexport default function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n): InstanceType<T> | null {\n  if (!element.__base__ || !element.__base__.has(Constructor)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor) as InstanceType<T>;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKe,SAAR,uBACL,SACA,aACwB;AACxB,MAAI,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,WAAW,GAAG;AAC3D,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,WAAW;AACzC;",
+  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/index.js';\n\n/**\n * Get a component instance from a DOM element.\n */\nexport default function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n): InstanceType<T> | null {\n  if (!element || !element.__base__ || !element.__base__.has(Constructor)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor) as InstanceType<T>;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKe,SAAR,uBACL,SACA,aACwB;AACxB,MAAI,CAAC,WAAW,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,WAAW,GAAG;AACvE,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,WAAW;AACzC;",
   "names": []
 }

package/helpers/getInstanceFromElement.js

@@ -1,5 +1,5 @@
 function getInstanceFromElement(element, Constructor) {
-  if (!element.__base__ || !element.__base__.has(Constructor)) {
+  if (!element || !element.__base__ || !element.__base__.has(Constructor)) {
     return null;
   }
   return element.__base__.get(Constructor);

package/helpers/getInstanceFromElement.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/getInstanceFromElement.ts"],
-  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/index.js';\n\n/**\n * Get a component instance from a DOM element.\n */\nexport default function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n): InstanceType<T> | null {\n  if (!element.__base__ || !element.__base__.has(Constructor)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor) as InstanceType<T>;\n}\n"],
-  "mappings": "AAKe,SAAR,uBACL,SACA,aACwB;AACxB,MAAI,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,WAAW,GAAG;AAC3D,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,WAAW;AACzC;",
+  "sourcesContent": ["import type { BaseConstructor, BaseEl } from '../Base/index.js';\n\n/**\n * Get a component instance from a DOM element.\n */\nexport default function getInstanceFromElement<T extends BaseConstructor>(\n  element: BaseEl,\n  Constructor: T,\n): InstanceType<T> | null {\n  if (!element || !element.__base__ || !element.__base__.has(Constructor)) {\n    return null;\n  }\n\n  return element.__base__.get(Constructor) as InstanceType<T>;\n}\n"],
+  "mappings": "AAKe,SAAR,uBACL,SACA,aACwB;AACxB,MAAI,CAAC,WAAW,CAAC,QAAQ,YAAY,CAAC,QAAQ,SAAS,IAAI,WAAW,GAAG;AACvE,WAAO;AAAA,EACT;AAEA,SAAO,QAAQ,SAAS,IAAI,WAAW;AACzC;",
   "names": []
 }

package/helpers/importOnInteraction.cjs

@@ -26,13 +26,7 @@ var import_utils = require("./utils.cjs");
 var import_utils2 = require("../utils/index.cjs");
 function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
   const normalizedEvents = (0, import_utils2.isString)(events) ? [events] : events;
-  let ResolvedClass;
-  const resolver = (resolve) => {
-    fn().then((module2) => {
-      ResolvedClass = "default" in module2 ? module2.default : module2;
-      resolve(ResolvedClass);
-    });
-  };
+  const resolver = (0, import_utils2.getComponentResolver)(fn);
   return new Promise((resolve) => {
     const elements = (0, import_utils.getTargetElements)(nameOrSelectorOrElement, parent?.$el);
     const eventListenerOptions = {

package/helpers/importOnInteraction.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importOnInteraction.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isString } from '../utils/index.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @returns {Promise<InstanceType<T>>}\n */\nexport default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  events: string | string[],\n  parent?: Base,\n): Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    elements.forEach((element) => {\n      normalizedEvents.forEach((event) => {\n        element.addEventListener(event, handler, eventListenerOptions);\n      });\n    });\n  });\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,IAAAA,gBAAyB;AAgBV,SAAR,oBACL,IACA,yBACA,QACA,QACY;AACZ,QAAM,uBAAmB,wBAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAACC,YAAW;AACpB,sBAAgB,aAAaA,UAASA,QAAO,UAAUA;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,eAAW,gCAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,uBAAiB,QAAQ,CAAC,UAAU;AAClC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;",
-  "names": ["import_utils", "module"]
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isString, getComponentResolver } from '../utils/index.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @returns {Promise<InstanceType<T>>}\n */\nexport default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  events: string | string[],\n  parent?: Base,\n): Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    elements.forEach((element) => {\n      normalizedEvents.forEach((event) => {\n        element.addEventListener(event, handler, eventListenerOptions);\n      });\n    });\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,IAAAA,gBAA+C;AAgBhC,SAAR,oBACL,IACA,yBACA,QACA,QACY;AACZ,QAAM,uBAAmB,wBAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,QAAM,eAAW,oCAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,eAAW,gCAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,uBAAiB,QAAQ,CAAC,UAAU;AAClC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;",
+  "names": ["import_utils"]
 }

package/helpers/importOnInteraction.js

@@ -1,14 +1,8 @@
 import { getTargetElements } from "./utils.js";
-import { isString } from "../utils/index.js";
+import { isString, getComponentResolver } from "../utils/index.js";
 function importOnInteraction(fn, nameOrSelectorOrElement, events, parent) {
   const normalizedEvents = isString(events) ? [events] : events;
-  let ResolvedClass;
-  const resolver = (resolve) => {
-    fn().then((module) => {
-      ResolvedClass = "default" in module ? module.default : module;
-      resolve(ResolvedClass);
-    });
-  };
+  const resolver = getComponentResolver(fn);
   return new Promise((resolve) => {
     const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);
     const eventListenerOptions = {

package/helpers/importOnInteraction.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importOnInteraction.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isString } from '../utils/index.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @returns {Promise<InstanceType<T>>}\n */\nexport default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  events: string | string[],\n  parent?: Base,\n): Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    elements.forEach((element) => {\n      normalizedEvents.forEach((event) => {\n        element.addEventListener(event, handler, eventListenerOptions);\n      });\n    });\n  });\n}\n"],
-  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAgBV,SAAR,oBACL,IACA,yBACA,QACA,QACY;AACZ,QAAM,mBAAmB,SAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAAC,WAAW;AACpB,sBAAgB,aAAa,SAAS,OAAO,UAAU;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,uBAAiB,QAAQ,CAAC,UAAU;AAClC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;",
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isString, getComponentResolver } from '../utils/index.js';\n\n/**\n * Import a component on an interaction.\n *\n * @template {BaseConstructor} [T=BaseConstructor]\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {string|string[]} events\n *   The events to listen to to trigger the import.\n * @param {Base} [parent]\n *   The parent component.\n * @returns {Promise<InstanceType<T>>}\n */\nexport default function importOnInteraction<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  events: string | string[],\n  parent?: Base,\n): Promise<T> {\n  const normalizedEvents = isString(events) ? [events] : events;\n\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    const eventListenerOptions = {\n      capture: true,\n      passive: true,\n      once: true,\n    };\n    const handler = () => {\n      resolver(resolve);\n    };\n\n    elements.forEach((element) => {\n      normalizedEvents.forEach((event) => {\n        element.addEventListener(event, handler, eventListenerOptions);\n      });\n    });\n  });\n}\n"],
+  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,UAAU,4BAA4B;AAgBhC,SAAR,oBACL,IACA,yBACA,QACA,QACY;AACZ,QAAM,mBAAmB,SAAS,MAAM,IAAI,CAAC,MAAM,IAAI;AAEvD,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,UAAM,uBAAuB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AACA,UAAM,UAAU,MAAM;AACpB,eAAS,OAAO;AAAA,IAClB;AAEA,aAAS,QAAQ,CAAC,YAAY;AAC5B,uBAAiB,QAAQ,CAAC,UAAU;AAClC,gBAAQ,iBAAiB,OAAO,SAAS,oBAAoB;AAAA,MAC/D,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;",
   "names": []
 }

package/helpers/importOnMediaQuery.cjs

@@ -0,0 +1,44 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/helpers/importOnMediaQuery.ts
+var importOnMediaQuery_exports = {};
+__export(importOnMediaQuery_exports, {
+  default: () => importOnMediaQuery
+});
+module.exports = __toCommonJS(importOnMediaQuery_exports);
+var import_utils = require("../utils");
+function importOnMediaQuery(fn, media) {
+  const resolver = (0, import_utils.getComponentResolver)(fn);
+  return new Promise((resolve) => {
+    const mediaQueryList = window.matchMedia(media);
+    if (mediaQueryList.matches) {
+      resolver(resolve);
+    }
+    const changeHandler = (event) => {
+      if (event.matches) {
+        setTimeout(() => {
+          resolver(resolve, () => mediaQueryList.removeEventListener("change", changeHandler));
+        }, 0);
+      }
+    };
+    mediaQueryList.addEventListener("change", changeHandler);
+  });
+}
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=importOnMediaQuery.cjs.map

package/helpers/importOnMediaQuery.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importOnMediaQuery.ts"],
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\nimport { getComponentResolver } from '../utils';\n\n/**\n * Import a component when given media query is true.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string} media\n *   The media query name and value (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features)\n * @returns {Promise<T>}\n */\nexport default function importOnMediaQuery<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  media: string,\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const mediaQueryList = window.matchMedia(media);\n\n    if (mediaQueryList.matches) {\n      resolver(resolve);\n    }\n\n    const changeHandler = (event: MediaQueryListEvent) => {\n      if (event.matches) {\n        setTimeout(() => {\n          // Remove listener and mount the component\n          resolver(resolve, () => mediaQueryList.removeEventListener('change', changeHandler));\n        }, 0);\n      }\n    };\n\n    // Start listening for changes\n    mediaQueryList.addEventListener('change', changeHandler);\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAqC;AAYtB,SAAR,mBACL,IACA,OACY;AACZ,QAAM,eAAW,mCAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,iBAAiB,OAAO,WAAW,KAAK;AAE9C,QAAI,eAAe,SAAS;AAC1B,eAAS,OAAO;AAAA,IAClB;AAEA,UAAM,gBAAgB,CAAC,UAA+B;AACpD,UAAI,MAAM,SAAS;AACjB,mBAAW,MAAM;AAEf,mBAAS,SAAS,MAAM,eAAe,oBAAoB,UAAU,aAAa,CAAC;AAAA,QACrF,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAGA,mBAAe,iBAAiB,UAAU,aAAa;AAAA,EACzD,CAAC;AACH;",
+  "names": []
+}

package/helpers/importOnMediaQuery.d.ts

@@ -0,0 +1,14 @@
+import type { BaseConstructor } from '../Base/index.js';
+/**
+ * Import a component when given media query is true.
+ *
+ * @template {BaseConstructor} T
+ * @param {() => Promise<T|{default:T}>} fn
+ *   The import function.
+ * @param {string} media
+ *   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>(fn: () => Promise<T | {
+    default: T;
+}>, media: string): Promise<T>;

package/helpers/importOnMediaQuery.js

@@ -0,0 +1,22 @@
+import { getComponentResolver } from "../utils";
+function importOnMediaQuery(fn, media) {
+  const resolver = getComponentResolver(fn);
+  return new Promise((resolve) => {
+    const mediaQueryList = window.matchMedia(media);
+    if (mediaQueryList.matches) {
+      resolver(resolve);
+    }
+    const changeHandler = (event) => {
+      if (event.matches) {
+        setTimeout(() => {
+          resolver(resolve, () => mediaQueryList.removeEventListener("change", changeHandler));
+        }, 0);
+      }
+    };
+    mediaQueryList.addEventListener("change", changeHandler);
+  });
+}
+export {
+  importOnMediaQuery as default
+};
+//# sourceMappingURL=importOnMediaQuery.js.map

package/helpers/importOnMediaQuery.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importOnMediaQuery.ts"],
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\nimport { getComponentResolver } from '../utils';\n\n/**\n * Import a component when given media query is true.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string} media\n *   The media query name and value (see https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features)\n * @returns {Promise<T>}\n */\nexport default function importOnMediaQuery<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  media: string,\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const mediaQueryList = window.matchMedia(media);\n\n    if (mediaQueryList.matches) {\n      resolver(resolve);\n    }\n\n    const changeHandler = (event: MediaQueryListEvent) => {\n      if (event.matches) {\n        setTimeout(() => {\n          // Remove listener and mount the component\n          resolver(resolve, () => mediaQueryList.removeEventListener('change', changeHandler));\n        }, 0);\n      }\n    };\n\n    // Start listening for changes\n    mediaQueryList.addEventListener('change', changeHandler);\n  });\n}\n"],
+  "mappings": "AACA,SAAS,4BAA4B;AAYtB,SAAR,mBACL,IACA,OACY;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,iBAAiB,OAAO,WAAW,KAAK;AAE9C,QAAI,eAAe,SAAS;AAC1B,eAAS,OAAO;AAAA,IAClB;AAEA,UAAM,gBAAgB,CAAC,UAA+B;AACpD,UAAI,MAAM,SAAS;AACjB,mBAAW,MAAM;AAEf,mBAAS,SAAS,MAAM,eAAe,oBAAoB,UAAU,aAAa,CAAC;AAAA,QACrF,GAAG,CAAC;AAAA,MACN;AAAA,IACF;AAGA,mBAAe,iBAAiB,UAAU,aAAa;AAAA,EACzD,CAAC;AACH;",
+  "names": []
+}

package/helpers/importWhenIdle.cjs

@@ -22,14 +22,9 @@ __export(importWhenIdle_exports, {
   default: () => importWhenIdle
 });
 module.exports = __toCommonJS(importWhenIdle_exports);
+var import_utils = require("../utils/index.cjs");
 function importWhenIdle(fn, { timeout = 1 } = {}) {
-  let ResolvedClass;
-  const resolver = (resolve) => {
-    fn().then((module2) => {
-      ResolvedClass = "default" in module2 ? module2.default : module2;
-      resolve(ResolvedClass);
-    });
-  };
+  const resolver = (0, import_utils.getComponentResolver)(fn);
   return new Promise((resolve) => {
     if (!("requestIdleCallback" in window)) {
       setTimeout(() => {

package/helpers/importWhenIdle.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importWhenIdle.ts"],
-  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @returns {Promise<T>}\n */\nexport default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n): Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBe,SAAR,eACL,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC9B;AACZ,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAACA,YAAW;AACpB,sBAAgB,aAAaA,UAASA,QAAO,UAAUA;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
-  "names": ["module"]
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\nimport { getComponentResolver } from '../utils/index.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @returns {Promise<T>}\n */\nexport default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAqC;AAgBtB,SAAR,eACL,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC9B;AACZ,QAAM,eAAW,mCAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "names": []
 }

package/helpers/importWhenIdle.js

@@ -1,11 +1,6 @@
+import { getComponentResolver } from "../utils/index.js";
 function importWhenIdle(fn, { timeout = 1 } = {}) {
-  let ResolvedClass;
-  const resolver = (resolve) => {
-    fn().then((module) => {
-      ResolvedClass = "default" in module ? module.default : module;
-      resolve(ResolvedClass);
-    });
-  };
+  const resolver = getComponentResolver(fn);
   return new Promise((resolve) => {
     if (!("requestIdleCallback" in window)) {
       setTimeout(() => {

package/helpers/importWhenIdle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importWhenIdle.ts"],
-  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @returns {Promise<T>}\n */\nexport default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n): Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n    });\n  };\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
-  "mappings": "AAgBe,SAAR,eACL,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC9B;AACZ,MAAI;AAEJ,QAAM,WAAW,CAAC,YAAY;AAC5B,OAAG,EAAE,KAAK,CAAC,WAAW;AACpB,sBAAgB,aAAa,SAAS,OAAO,UAAU;AACvD,cAAQ,aAAa;AAAA,IACvB,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\nimport { getComponentResolver } from '../utils/index.js';\n\ntype ImportWhenIdleOptions = {\n  timeout?: number;\n};\n\n/**\n * Import a component when user is idle.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {ImportWhenIdleOptions} [options]\n *   The time to wait before triggering the callback if never idle.\n * @returns {Promise<T>}\n */\nexport default function importWhenIdle<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  { timeout = 1 }: ImportWhenIdleOptions = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    if (!('requestIdleCallback' in window)) {\n      setTimeout(() => {\n        resolver(resolve);\n      }, timeout);\n    } else {\n      window.requestIdleCallback(\n        () => {\n          setTimeout(() => {\n            resolver(resolve);\n          }, 0);\n        },\n        { timeout },\n      );\n    }\n  });\n}\n"],
+  "mappings": "AACA,SAAS,4BAA4B;AAgBtB,SAAR,eACL,IACA,EAAE,UAAU,EAAE,IAA2B,CAAC,GAC9B;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,EAAE,yBAAyB,SAAS;AACtC,iBAAW,MAAM;AACf,iBAAS,OAAO;AAAA,MAClB,GAAG,OAAO;AAAA,IACZ,OAAO;AACL,aAAO;AAAA,QACL,MAAM;AACJ,qBAAW,MAAM;AACf,qBAAS,OAAO;AAAA,UAClB,GAAG,CAAC;AAAA,QACN;AAAA,QACA,EAAE,QAAQ;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/helpers/importWhenPrefersMotion.cjs

@@ -0,0 +1,36 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/js-toolkit/helpers/importWhenPrefersMotion.ts
+var importWhenPrefersMotion_exports = {};
+__export(importWhenPrefersMotion_exports, {
+  default: () => importWhenPrefersMotion
+});
+module.exports = __toCommonJS(importWhenPrefersMotion_exports);
+var import_importOnMediaQuery = __toESM(require("./importOnMediaQuery.cjs"), 1);
+function importWhenPrefersMotion(fn) {
+  return (0, import_importOnMediaQuery.default)(fn, "not (prefers-reduced-motion)");
+}
+if (module.exports.default) module.exports = module.exports.default;
+//# sourceMappingURL=importWhenPrefersMotion.cjs.map

package/helpers/importWhenPrefersMotion.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importWhenPrefersMotion.ts"],
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\nimport importOnMediaQuery from './importOnMediaQuery.js';\n\n/**\n * Import a component if user does not reduce motion.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n * @returns {Promise<T>}\n */\nexport default function importWhenPrefersMotion<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n): Promise<T> {\n  return importOnMediaQuery(fn, 'not (prefers-reduced-motion)');\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gCAA+B;AAShB,SAAR,wBACL,IACY;AACZ,aAAO,0BAAAA,SAAmB,IAAI,8BAA8B;AAC9D;",
+  "names": ["importOnMediaQuery"]
+}

package/helpers/importWhenPrefersMotion.d.ts

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

package/helpers/importWhenPrefersMotion.js

@@ -0,0 +1,8 @@
+import importOnMediaQuery from "./importOnMediaQuery.js";
+function importWhenPrefersMotion(fn) {
+  return importOnMediaQuery(fn, "not (prefers-reduced-motion)");
+}
+export {
+  importWhenPrefersMotion as default
+};
+//# sourceMappingURL=importWhenPrefersMotion.js.map

package/helpers/importWhenPrefersMotion.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/importWhenPrefersMotion.ts"],
+  "sourcesContent": ["import type { BaseConstructor } from '../Base/index.js';\nimport importOnMediaQuery from './importOnMediaQuery.js';\n\n/**\n * Import a component if user does not reduce motion.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n * @returns {Promise<T>}\n */\nexport default function importWhenPrefersMotion<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n): Promise<T> {\n  return importOnMediaQuery(fn, 'not (prefers-reduced-motion)');\n}\n"],
+  "mappings": "AACA,OAAO,wBAAwB;AAShB,SAAR,wBACL,IACY;AACZ,SAAO,mBAAmB,IAAI,8BAA8B;AAC9D;",
+  "names": []
+}

package/helpers/importWhenVisible.cjs

@@ -25,16 +25,7 @@ module.exports = __toCommonJS(importWhenVisible_exports);
 var import_utils = require("./utils.cjs");
 var import_utils2 = require("../utils/index.cjs");
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
-  let ResolvedClass;
-  const resolver = (resolve, cb) => {
-    fn().then((module2) => {
-      ResolvedClass = "default" in module2 ? module2.default : module2;
-      resolve(ResolvedClass);
-      if ((0, import_utils2.isFunction)(cb)) {
-        cb();
-      }
-    });
-  };
+  const resolver = (0, import_utils2.getComponentResolver)(fn);
   return new Promise((resolve) => {
     const observer = new IntersectionObserver((entries) => {
       const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);

package/helpers/importWhenVisible.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importWhenVisible.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isFunction } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve, cb) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n\n      if (isFunction(cb)) {\n        cb();\n      }\n    });\n  };\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    elements.forEach((element) => observer.observe(element));\n  });\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,IAAAA,gBAA2B;AAgBZ,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,MAAI;AAEJ,QAAM,WAAW,CAAC,SAAS,OAAO;AAChC,OAAG,EAAE,KAAK,CAACC,YAAW;AACpB,sBAAgB,aAAaA,UAASA,QAAO,UAAUA;AACvD,cAAQ,aAAa;AAErB,cAAI,0BAAW,EAAE,GAAG;AAClB,WAAG;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,eAAW,gCAAkB,yBAAyB,QAAQ,GAAG;AACvE,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AAAA,EACzD,CAAC;AACH;",
-  "names": ["import_utils", "module"]
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { getComponentResolver } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    elements.forEach((element) => observer.observe(element));\n  });\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,IAAAA,gBAAqC;AAgBtB,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,QAAM,eAAW,oCAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,eAAW,gCAAkB,yBAAyB,QAAQ,GAAG;AACvE,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AAAA,EACzD,CAAC;AACH;",
+  "names": ["import_utils"]
 }

package/helpers/importWhenVisible.js

@@ -1,16 +1,7 @@
 import { getTargetElements } from "./utils.js";
-import { isFunction } from "../utils/index.js";
+import { getComponentResolver } from "../utils/index.js";
 function importWhenVisible(fn, nameOrSelectorOrElement, parent, observerOptions = {}) {
-  let ResolvedClass;
-  const resolver = (resolve, cb) => {
-    fn().then((module) => {
-      ResolvedClass = "default" in module ? module.default : module;
-      resolve(ResolvedClass);
-      if (isFunction(cb)) {
-        cb();
-      }
-    });
-  };
+  const resolver = getComponentResolver(fn);
   return new Promise((resolve) => {
     const observer = new IntersectionObserver((entries) => {
       const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);

package/helpers/importWhenVisible.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/importWhenVisible.ts"],
-  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { isFunction } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  let ResolvedClass;\n\n  const resolver = (resolve, cb) => {\n    fn().then((module) => {\n      ResolvedClass = 'default' in module ? module.default : module;\n      resolve(ResolvedClass);\n\n      if (isFunction(cb)) {\n        cb();\n      }\n    });\n  };\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    elements.forEach((element) => observer.observe(element));\n  });\n}\n"],
-  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAgBZ,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,MAAI;AAEJ,QAAM,WAAW,CAAC,SAAS,OAAO;AAChC,OAAG,EAAE,KAAK,CAAC,WAAW;AACpB,sBAAgB,aAAa,SAAS,OAAO,UAAU;AACvD,cAAQ,aAAa;AAErB,UAAI,WAAW,EAAE,GAAG;AAClB,WAAG;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AAAA,EACzD,CAAC;AACH;",
+  "sourcesContent": ["import type { Base, BaseConstructor } from '../Base/index.js';\nimport { getTargetElements } from './utils.js';\nimport { getComponentResolver } from '../utils/index.js';\n\n/**\n * Import a component when it is visible.\n *\n * @template {BaseConstructor} T\n * @param {() => Promise<T|{default:T}>} fn\n *   The import function.\n * @param {string|HTMLElement|HTMLElement[]} nameOrSelectorOrElement\n *   The name or selector for the component.\n * @param {Base} [parent]\n *   The parent component.\n * @param {IntersectionObserverInit} [observerOptions]\n *   Options for the `IntersectionObserver` instance.\n * @returns {Promise<T>}\n */\nexport default function importWhenVisible<T extends BaseConstructor = BaseConstructor>(\n  fn: () => Promise<T | { default: T }>,\n  nameOrSelectorOrElement: string | HTMLElement | HTMLElement[],\n  parent?: Base,\n  observerOptions: IntersectionObserverInit = {},\n): Promise<T> {\n  const resolver = getComponentResolver(fn);\n\n  return new Promise((resolve) => {\n    const observer = new IntersectionObserver((entries) => {\n      const someEntriesAreVisible = entries.some((entry) => entry.isIntersecting);\n      if (someEntriesAreVisible) {\n        setTimeout(() => {\n          resolver(resolve, () => observer.disconnect());\n        }, 0);\n      }\n    }, observerOptions);\n\n    const elements = getTargetElements(nameOrSelectorOrElement, parent?.$el);\n    elements.forEach((element) => observer.observe(element));\n  });\n}\n"],
+  "mappings": "AACA,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAgBtB,SAAR,kBACL,IACA,yBACA,QACA,kBAA4C,CAAC,GACjC;AACZ,QAAM,WAAW,qBAAqB,EAAE;AAExC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,WAAW,IAAI,qBAAqB,CAAC,YAAY;AACrD,YAAM,wBAAwB,QAAQ,KAAK,CAAC,UAAU,MAAM,cAAc;AAC1E,UAAI,uBAAuB;AACzB,mBAAW,MAAM;AACf,mBAAS,SAAS,MAAM,SAAS,WAAW,CAAC;AAAA,QAC/C,GAAG,CAAC;AAAA,MACN;AAAA,IACF,GAAG,eAAe;AAElB,UAAM,WAAW,kBAAkB,yBAAyB,QAAQ,GAAG;AACvE,aAAS,QAAQ,CAAC,YAAY,SAAS,QAAQ,OAAO,CAAC;AAAA,EACzD,CAAC;AACH;",
   "names": []
 }

package/helpers/index.cjs

@@ -30,7 +30,9 @@ __export(helpers_exports, {
   getClosestParent: () => import_getClosestParent.default,
   getInstanceFromElement: () => import_getInstanceFromElement.default,
   importOnInteraction: () => import_importOnInteraction.default,
+  importOnMediaQuery: () => import_importOnMediaQuery.default,
   importWhenIdle: () => import_importWhenIdle.default,
+  importWhenPrefersMotion: () => import_importWhenPrefersMotion.default,
   importWhenVisible: () => import_importWhenVisible.default
 });
 module.exports = __toCommonJS(helpers_exports);
@@ -41,5 +43,7 @@ var import_getInstanceFromElement = __toESM(require("./getInstanceFromElement.cj
 var import_importOnInteraction = __toESM(require("./importOnInteraction.cjs"), 1);
 var import_importWhenIdle = __toESM(require("./importWhenIdle.cjs"), 1);
 var import_importWhenVisible = __toESM(require("./importWhenVisible.cjs"), 1);
+var import_importOnMediaQuery = __toESM(require("./importOnMediaQuery.cjs"), 1);
+var import_importWhenPrefersMotion = __toESM(require("./importWhenPrefersMotion"), 1);
 if (module.exports.default) module.exports = module.exports.default;
 //# sourceMappingURL=index.cjs.map

package/helpers/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/index.ts"],
-  "sourcesContent": ["export * from './getDirectChildren.js';\nexport { default as createApp } from './createApp.js';\nexport { default as getClosestParent } from './getClosestParent.js';\nexport { default as getInstanceFromElement } from './getInstanceFromElement.js';\nexport { default as importOnInteraction } from './importOnInteraction.js';\nexport { default as importWhenIdle } from './importWhenIdle.js';\nexport { default as importWhenVisible } from './importWhenVisible.js';\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAc,oCAAd;AACA,uBAAqC;AACrC,8BAA4C;AAC5C,oCAAkD;AAClD,iCAA+C;AAC/C,4BAA0C;AAC1C,+BAA6C;",
+  "sourcesContent": ["export * from './getDirectChildren.js';\nexport { default as createApp } from './createApp.js';\nexport { default as getClosestParent } from './getClosestParent.js';\nexport { default as getInstanceFromElement } from './getInstanceFromElement.js';\nexport { default as importOnInteraction } from './importOnInteraction.js';\nexport { default as importWhenIdle } from './importWhenIdle.js';\nexport { default as importWhenVisible } from './importWhenVisible.js';\nexport { default as importOnMediaQuery } from './importOnMediaQuery.js';\nexport { default as importWhenPrefersMotion } from './importWhenPrefersMotion';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAc,oCAAd;AACA,uBAAqC;AACrC,8BAA4C;AAC5C,oCAAkD;AAClD,iCAA+C;AAC/C,4BAA0C;AAC1C,+BAA6C;AAC7C,gCAA8C;AAC9C,qCAAmD;",
   "names": []
 }

package/helpers/index.d.ts

@@ -5,3 +5,5 @@ 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';

package/helpers/index.js

@@ -5,12 +5,16 @@ import { default as default4 } from "./getInstanceFromElement.js";
 import { default as default5 } from "./importOnInteraction.js";
 import { default as default6 } from "./importWhenIdle.js";
 import { default as default7 } from "./importWhenVisible.js";
+import { default as default8 } from "./importOnMediaQuery.js";
+import { default as default9 } from "./importWhenPrefersMotion";
 export {
   default2 as createApp,
   default3 as getClosestParent,
   default4 as getInstanceFromElement,
   default5 as importOnInteraction,
+  default8 as importOnMediaQuery,
   default6 as importWhenIdle,
+  default9 as importWhenPrefersMotion,
   default7 as importWhenVisible
 };
 //# sourceMappingURL=index.js.map

package/helpers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/index.ts"],
-  "sourcesContent": ["export * from './getDirectChildren.js';\nexport { default as createApp } from './createApp.js';\nexport { default as getClosestParent } from './getClosestParent.js';\nexport { default as getInstanceFromElement } from './getInstanceFromElement.js';\nexport { default as importOnInteraction } from './importOnInteraction.js';\nexport { default as importWhenIdle } from './importWhenIdle.js';\nexport { default as importWhenVisible } from './importWhenVisible.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAAyC;AAClD,SAAoB,WAAXA,gBAAsC;AAC/C,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;",
+  "sourcesContent": ["export * from './getDirectChildren.js';\nexport { default as createApp } from './createApp.js';\nexport { default as getClosestParent } from './getClosestParent.js';\nexport { default as getInstanceFromElement } from './getInstanceFromElement.js';\nexport { default as importOnInteraction } from './importOnInteraction.js';\nexport { default as importWhenIdle } from './importWhenIdle.js';\nexport { default as importWhenVisible } from './importWhenVisible.js';\nexport { default as importOnMediaQuery } from './importOnMediaQuery.js';\nexport { default as importWhenPrefersMotion } from './importWhenPrefersMotion';\n"],
+  "mappings": "AAAA,cAAc;AACd,SAAoB,WAAXA,gBAA4B;AACrC,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAAyC;AAClD,SAAoB,WAAXA,gBAAsC;AAC/C,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAA0C;",
   "names": ["default"]
 }