@studiometa/js-toolkit 3.7.0 → 3.8.0

package/helpers/index.d.ts

@@ -10,4 +10,5 @@ export * from './importWhenPrefersMotion.js';
 export * from './importWhenVisible.js';
 export * from './logTree.js';
 export * from './registerComponent.js';
+export * from './registerComponents.js';
 export { type QueryOptions, queryComponent, queryComponentAll, closestComponent, } from './queryComponent.js';

package/helpers/index.js

@@ -10,6 +10,7 @@ export * from "./importWhenPrefersMotion.js";
 export * from "./importWhenVisible.js";
 export * from "./logTree.js";
 export * from "./registerComponent.js";
+export * from "./registerComponents.js";
 import {
   queryComponent,
   queryComponentAll,

package/helpers/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/index.ts"],
-  "sourcesContent": ["export * from './createApp.js';\nexport * from './defineFeatures.js';\nexport * from './getClosestParent.js';\nexport * from './getDirectChildren.js';\nexport * from './getInstanceFromElement.js';\nexport * from './importOnInteraction.js';\nexport * from './importOnMediaQuery.js';\nexport * from './importWhenIdle.js';\nexport * from './importWhenPrefersMotion.js';\nexport * from './importWhenVisible.js';\nexport * from './logTree.js';\nexport * from './registerComponent.js';\nexport {\n  type QueryOptions,\n  queryComponent,\n  queryComponentAll,\n  closestComponent,\n} from './queryComponent.js';\n"],
-  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
+  "sourcesContent": ["export * from './createApp.js';\nexport * from './defineFeatures.js';\nexport * from './getClosestParent.js';\nexport * from './getDirectChildren.js';\nexport * from './getInstanceFromElement.js';\nexport * from './importOnInteraction.js';\nexport * from './importOnMediaQuery.js';\nexport * from './importWhenIdle.js';\nexport * from './importWhenPrefersMotion.js';\nexport * from './importWhenVisible.js';\nexport * from './logTree.js';\nexport * from './registerComponent.js';\nexport * from './registerComponents.js';\nexport {\n  type QueryOptions,\n  queryComponent,\n  queryComponentAll,\n  closestComponent,\n} from './queryComponent.js';\n"],
+  "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;",
   "names": []
 }

package/helpers/registerComponent.d.ts

@@ -1,10 +1,24 @@
 import { BaseConstructor } from '../Base/Base.js';
 /**
- * Register globally and mount a given component, or a promise resolving to a component.
+ * Register globally and mount a given component.
+ *
+ * The component can be provided in any of the forms also accepted for child
+ * components in `config.components`:
+ * - a `Base` constructor;
+ * - a promise resolving to a constructor or a module namespace (`import(...)`);
+ * - a factory function returning such a promise (`() => import(...)`).
+ *
+ * Instances are mounted independently: an element that fails to mount is
+ * skipped (and logged in development) instead of failing the whole call, so
+ * the resolved array contains every instance that mounted successfully.
  *
  * @link https://js-toolkit.studiometa.dev/api/helpers/registerComponent.html
- * @param ctor The component constructor or a promise resolving to it.
+ * @param ctor The component constructor, or a way to resolve it.
  * @param nameOrSelector The name or selector to used for this component.
  * @return A promise resolving to an array of mounted component instances.
  */
-export declare function registerComponent<T extends BaseConstructor = BaseConstructor>(ctor: T | Promise<T>, nameOrSelector?: string): Promise<Awaited<InstanceType<T>>[]>;
+export declare function registerComponent<T extends BaseConstructor = BaseConstructor>(ctor: T | Promise<T | {
+    default: T;
+}> | (() => Promise<T | {
+    default: T;
+}>), nameOrSelector?: string): Promise<Awaited<InstanceType<T>>[]>;

package/helpers/registerComponent.js

@@ -1,9 +1,28 @@
+import { isDev, isFunction } from "../utils/index.js";
 async function registerComponent(ctor, nameOrSelector) {
+  if (isFunction(ctor) && !("$isBase" in ctor)) {
+    ctor = ctor(void 0);
+  }
+  let Ctor;
   if (ctor instanceof Promise) {
-    ctor = await ctor;
+    const module = await ctor;
+    Ctor = "$isBase" in module ? module : module.default;
+  } else {
+    Ctor = ctor;
   }
-  const instances = await Promise.all(ctor.$register(nameOrSelector));
-  return instances;
+  const results = await Promise.allSettled(Ctor.$register(nameOrSelector));
+  return results.flatMap((result) => {
+    if (result.status === "fulfilled") {
+      return [result.value];
+    }
+    if (isDev) {
+      console.error(
+        "[registerComponent] An instance failed to mount and was skipped.",
+        result.reason
+      );
+    }
+    return [];
+  });
 }
 export {
   registerComponent

package/helpers/registerComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../packages/js-toolkit/helpers/registerComponent.ts"],
-  "sourcesContent": ["import { BaseConstructor } from '../Base/Base.js';\n\n/**\n * Register globally and mount a given component, or a promise resolving to a component.\n *\n * @link https://js-toolkit.studiometa.dev/api/helpers/registerComponent.html\n * @param ctor The component constructor or a promise resolving to it.\n * @param nameOrSelector The name or selector to used for this component.\n * @return A promise resolving to an array of mounted component instances.\n */\nexport async function registerComponent<T extends BaseConstructor = BaseConstructor>(\n  ctor: T | Promise<T>,\n  nameOrSelector?: string,\n) {\n  if (ctor instanceof Promise) {\n    ctor = await ctor;\n  }\n\n  const instances = await Promise.all(ctor.$register(nameOrSelector));\n  return instances;\n}\n"],
-  "mappings": "AAUA,eAAsB,kBACpB,MACA,gBACA;AACA,MAAI,gBAAgB,SAAS;AAC3B,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,YAAY,MAAM,QAAQ,IAAI,KAAK,UAAU,cAAc,CAAC;AAClE,SAAO;AACT;",
+  "sourcesContent": ["import { BaseConstructor, BaseAsyncConstructor } from '../Base/Base.js';\nimport { isDev, isFunction } from '../utils/index.js';\n\n/**\n * Register globally and mount a given component.\n *\n * The component can be provided in any of the forms also accepted for child\n * components in `config.components`:\n * - a `Base` constructor;\n * - a promise resolving to a constructor or a module namespace (`import(...)`);\n * - a factory function returning such a promise (`() => import(...)`).\n *\n * Instances are mounted independently: an element that fails to mount is\n * skipped (and logged in development) instead of failing the whole call, so\n * the resolved array contains every instance that mounted successfully.\n *\n * @link https://js-toolkit.studiometa.dev/api/helpers/registerComponent.html\n * @param ctor The component constructor, or a way to resolve it.\n * @param nameOrSelector The name or selector to used for this component.\n * @return A promise resolving to an array of mounted component instances.\n */\nexport async function registerComponent<T extends BaseConstructor = BaseConstructor>(\n  ctor: T | Promise<T | { default: T }> | (() => Promise<T | { default: T }>),\n  nameOrSelector?: string,\n) {\n  // Resolve factory functions such as `() => import('./Component.js')`, mirroring\n  // how lazy child components are declared. A `Base` constructor is a function too,\n  // so it is distinguished by its `$isBase` marker.\n  if (isFunction(ctor) && !('$isBase' in ctor)) {\n    ctor = (ctor as BaseAsyncConstructor)(undefined as never) as Promise<T | { default: T }>;\n  }\n\n  let Ctor: T;\n  if (ctor instanceof Promise) {\n    const module = await ctor;\n    // A resolved `Base` constructor is used as-is; only a module namespace is\n    // unwrapped. Keying on `$isBase` (like the async child resolution) avoids\n    // mistaking a user-defined static `default` member for a module namespace.\n    Ctor = ('$isBase' in module ? module : (module as { default: T }).default) as T;\n  } else {\n    Ctor = ctor;\n  }\n\n  const results = await Promise.allSettled(Ctor.$register(nameOrSelector));\n\n  return results.flatMap((result) => {\n    if (result.status === 'fulfilled') {\n      return [result.value];\n    }\n\n    if (isDev) {\n      console.error(\n        '[registerComponent] An instance failed to mount and was skipped.',\n        result.reason,\n      );\n    }\n\n    return [];\n  });\n}\n"],
+  "mappings": "AACA,SAAS,OAAO,kBAAkB;AAoBlC,eAAsB,kBACpB,MACA,gBACA;AAIA,MAAI,WAAW,IAAI,KAAK,EAAE,aAAa,OAAO;AAC5C,WAAQ,KAA8B,MAAkB;AAAA,EAC1D;AAEA,MAAI;AACJ,MAAI,gBAAgB,SAAS;AAC3B,UAAM,SAAS,MAAM;AAIrB,WAAQ,aAAa,SAAS,SAAU,OAA0B;AAAA,EACpE,OAAO;AACL,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,MAAM,QAAQ,WAAW,KAAK,UAAU,cAAc,CAAC;AAEvE,SAAO,QAAQ,QAAQ,CAAC,WAAW;AACjC,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO,CAAC,OAAO,KAAK;AAAA,IACtB;AAEA,QAAI,OAAO;AACT,cAAQ;AAAA,QACN;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO,CAAC;AAAA,EACV,CAAC;AACH;",
   "names": []
 }

package/helpers/registerComponents.d.ts

@@ -0,0 +1,22 @@
+import { BaseConstructor } from '../Base/Base.js';
+/**
+ * Register globally and mount multiple components at once.
+ *
+ * Each component accepts the same forms as {@link registerComponent}: a `Base`
+ * constructor, a promise resolving to a constructor or module namespace, or a
+ * factory function returning such a promise.
+ *
+ * Components are registered independently: a single failure (e.g. a rejected
+ * dynamic import) does not prevent the others from being registered, and the
+ * returned array contains every instance that mounted successfully. Failures
+ * are logged in development.
+ *
+ * @link https://js-toolkit.studiometa.dev/api/helpers/registerComponents.html
+ * @param ctors The components, or ways to resolve them.
+ * @return A promise resolving to a flat array of mounted component instances.
+ */
+export declare function registerComponents<T extends BaseConstructor = BaseConstructor>(...ctors: (T | Promise<T | {
+    default: T;
+}> | (() => Promise<T | {
+    default: T;
+}>))[]): Promise<Awaited<InstanceType<T>>[]>;

package/helpers/registerComponents.js

@@ -0,0 +1,21 @@
+import { isDev } from "../utils/index.js";
+import { registerComponent } from "./registerComponent.js";
+async function registerComponents(...ctors) {
+  const results = await Promise.allSettled(ctors.map((ctor) => registerComponent(ctor)));
+  return results.flatMap((result) => {
+    if (result.status === "fulfilled") {
+      return result.value;
+    }
+    if (isDev) {
+      console.error(
+        "[registerComponents] A component failed to register and was skipped.",
+        result.reason
+      );
+    }
+    return [];
+  });
+}
+export {
+  registerComponents
+};
+//# sourceMappingURL=registerComponents.js.map

package/helpers/registerComponents.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/js-toolkit/helpers/registerComponents.ts"],
+  "sourcesContent": ["import { BaseConstructor } from '../Base/Base.js';\nimport { isDev } from '../utils/index.js';\nimport { registerComponent } from './registerComponent.js';\n\n/**\n * Register globally and mount multiple components at once.\n *\n * Each component accepts the same forms as {@link registerComponent}: a `Base`\n * constructor, a promise resolving to a constructor or module namespace, or a\n * factory function returning such a promise.\n *\n * Components are registered independently: a single failure (e.g. a rejected\n * dynamic import) does not prevent the others from being registered, and the\n * returned array contains every instance that mounted successfully. Failures\n * are logged in development.\n *\n * @link https://js-toolkit.studiometa.dev/api/helpers/registerComponents.html\n * @param ctors The components, or ways to resolve them.\n * @return A promise resolving to a flat array of mounted component instances.\n */\nexport async function registerComponents<T extends BaseConstructor = BaseConstructor>(\n  ...ctors: (T | Promise<T | { default: T }> | (() => Promise<T | { default: T }>))[]\n) {\n  const results = await Promise.allSettled(ctors.map((ctor) => registerComponent(ctor)));\n\n  return results.flatMap((result) => {\n    if (result.status === 'fulfilled') {\n      return result.value;\n    }\n\n    if (isDev) {\n      console.error(\n        '[registerComponents] A component failed to register and was skipped.',\n        result.reason,\n      );\n    }\n\n    return [];\n  });\n}\n"],
+  "mappings": "AACA,SAAS,aAAa;AACtB,SAAS,yBAAyB;AAkBlC,eAAsB,sBACjB,OACH;AACA,QAAM,UAAU,MAAM,QAAQ,WAAW,MAAM,IAAI,CAAC,SAAS,kBAAkB,IAAI,CAAC,CAAC;AAErF,SAAO,QAAQ,QAAQ,CAAC,WAAW;AACjC,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO,OAAO;AAAA,IAChB;AAEA,QAAI,OAAO;AACT,cAAQ;AAAA,QACN;AAAA,QACA,OAAO;AAAA,MACT;AAAA,IACF;AAEA,WAAO,CAAC;AAAA,EACV,CAAC;AACH;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/js-toolkit",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "A set of useful little bits of JavaScript to boost your project! 🚀",
   "publishConfig": {
     "access": "public"