chapterjs 0.1.4 → 0.2.1

package/dist/components/{convention.js → declaration.js}

@@ -1,15 +1,15 @@
-// `src/components/`: the folder is the kind of component, the path of the
-// file is its id. Everything a file declares is checked when it loads,
-// against the limits of Discord, so a mistake is explained before Discord
-// refuses it; the file is then bound to its path, which is what makes its
+// What a file declares with `button()`, `select()`, `modal()` and
+// `embed()`, checked when it loads against the limits of Discord, so a
+// mistake is explained before Discord refuses it; the component is then
+// bound to the name of its export, which is its id and what makes its
 // instances.
 import { Limits } from '../discord/api.js';
 import { checkEmbed } from '../structures/payload.js';
 import { isDynamic } from './component.js';
 import { readLook, renderButton, } from './button.js';
 import { DATA_KINDS } from './custom-id.js';
-import { isEmbedFile } from './embed.js';
-import { bindFile, COMPONENT_FOLDERS, fileStateOf, } from './file.js';
+import { isEmbedDeclaration } from './embed.js';
+import { bindComponent, componentStateOf, } from './declared.js';
 import { readField, renderModal } from './modal.js';
 import { readOptions } from './options.js';
 import { readChannelTypes, readPlaceholder, readRange, renderSelect, SELECT_TYPES, } from './select.js';
@@ -17,9 +17,12 @@ const fail = (message) => {
     throw new TypeError(message);
 };
 const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
-/** The names of the folders and files: what a path and an id can hold. */
-const NAME = /^[A-Za-z0-9_-]+$/;
-const FOLDERS = Object.keys(COMPONENT_FOLDERS);
+/**
+ * What the name of a component can hold: the name of an export (or of a
+ * file, for a default export), as long as a custom_id can carry it beside
+ * the data: no `:` (what separates the data), and room left for the data.
+ */
+const NAME = /^[^:\s]+$/;
 function checkKeys(what, value, allowed) {
     for (const key of Object.keys(value)) {
         if (!allowed.includes(key)) {
@@ -90,7 +93,7 @@ function checkRun(what, value, example) {
         fail(`${what} has no "run": the function to run when someone uses it, like ${example}`);
     }
 }
-function readButton(path, config) {
+function readButton(name, config) {
     if (!isRecord(config)) {
         return fail(`button() needs an object: button({ label: '...', run({ interaction }) { ... } })`);
     }
@@ -118,7 +121,7 @@ function readButton(path, config) {
     checkRun(what, config.run, `async run({ interaction }) { await interaction.update('Done!'); }`);
     return Object.freeze({
         kind: 'button',
-        path,
+        name,
         look: {
             style: look.style ?? 'primary',
             disabled: look.disabled ?? false,
@@ -132,7 +135,7 @@ function readButton(path, config) {
         run: config.run,
     });
 }
-function readSelect(path, config) {
+function readSelect(name, config) {
     if (!isRecord(config)) {
         return fail(`select() needs an object: select({ options: ['a', 'b'], run({ interaction, value }) { ... } })`);
     }
@@ -168,7 +171,7 @@ function readSelect(path, config) {
     checkRun(what, config.run, `async run({ interaction, values }) { ... }`);
     return Object.freeze({
         kind: 'select',
-        path,
+        name,
         type: type,
         options: Object.freeze(options),
         channelTypes: readChannelTypes(what, config.channelTypes),
@@ -186,7 +189,7 @@ function readSelect(path, config) {
         run: config.run,
     });
 }
-function readModal(path, config) {
+function readModal(name, config) {
     if (!isRecord(config)) {
         return fail(`modal() needs an object: modal({ title: '...', fields: { ... }, run({ interaction, fields }) { ... } })`);
     }
@@ -219,7 +222,7 @@ function readModal(path, config) {
     checkRun(what, config.run, `async run({ interaction, fields }) { ... }`);
     return Object.freeze({
         kind: 'modal',
-        path,
+        name,
         title: config.title,
         fields: Object.freeze(fields),
         data: checkDataShape(what, config.data),
@@ -228,34 +231,38 @@ function readModal(path, config) {
         run: config.run,
     });
 }
-/** A file of `src/components/`, by the kind its folder says. */
-function readOne(kind, path, exports) {
-    const file = exports.default;
-    const state = fileStateOf(file);
-    const example = `import { ${kind} } from 'chapterjs'; export default ${kind}({ ... })`;
-    if (!state) {
-        return fail('default' in exports
-            ? `The default export of this file must be what ${kind}() returns: ${example}`
-            : `This file has no default export. It should look like: ${example}`);
+/** One component, by the kind it was declared with. */
+function readOne(state, declared, { name, file, export: exported }) {
+    const what = `the ${WHAT[state.kind]} ${name}`;
+    if (!NAME.test(name)) {
+        fail(`"${name}" can't be the name of a ${WHAT[state.kind]}: the name of the export is its id, and an id has no space and no ":". Rename the export.`);
     }
-    if (state.kind !== kind) {
-        const folder = FOLDERS.find(one => COMPONENT_FOLDERS[one] === state.kind);
-        return fail(`This file exports a ${state.kind}, but it is in src/components/${FOLDERS.find(one => COMPONENT_FOLDERS[one] === kind)}/. Move it to src/components/${folder}/.`);
+    if (name.length > Limits.CustomId - 20) {
+        fail(`The name of ${what} is ${name.length} characters long: Discord gives ${Limits.CustomId} characters to the id of a component and its data together. Rename the export${exported === 'default' ? ` or the file ${file}` : ''} with something shorter.`);
     }
-    switch (kind) {
+    switch (state.kind) {
         case 'button': {
-            const loaded = readButton(path, state.config);
-            bindFile(file, { path, render: args => renderButton(loaded, args) });
+            const loaded = readButton(name, state.config);
+            bindComponent(declared, {
+                name,
+                render: args => renderButton(loaded, args),
+            });
             return loaded;
         }
         case 'select': {
-            const loaded = readSelect(path, state.config);
-            bindFile(file, { path, render: args => renderSelect(loaded, args) });
+            const loaded = readSelect(name, state.config);
+            bindComponent(declared, {
+                name,
+                render: args => renderSelect(loaded, args),
+            });
             return loaded;
         }
         case 'modal': {
-            const loaded = readModal(path, state.config);
-            bindFile(file, { path, render: args => renderModal(loaded, args) });
+            const loaded = readModal(name, state.config);
+            bindComponent(declared, {
+                name,
+                render: args => renderModal(loaded, args),
+            });
             return loaded;
         }
         default: {
@@ -266,74 +273,70 @@ function readOne(kind, path, exports) {
                 }
                 checkEmbed(config, 'this embed');
             }
-            bindFile(file, {
-                path,
+            bindComponent(declared, {
+                name,
                 render: args => {
                     if (typeof config === 'function')
                         return config(...args);
                     if (args.length > 0)
-                        fail(`${path.split('/').pop()} always looks the same: it takes no arguments.`);
+                        fail(`${name} always looks the same: it takes no arguments.`);
                     return config;
                 },
             });
-            return Object.freeze({ kind: 'embed', path });
+            return Object.freeze({ kind: 'embed', name });
         }
     }
 }
+/** What each kind is called in messages. */
+export const WHAT = {
+    button: 'button',
+    select: 'select menu',
+    modal: 'form',
+    embed: 'embed',
+};
 /**
- * `src/components/`: one folder per kind of component (`buttons/`,
- * `selects/`, `modals/`, `embeds/`), and in it one file per component,
- * whose path is its id. The file exports by default what `button()`,
- * `select()`, `modal()` or `embed()` returns.
+ * A component (a button, a select menu, a form or an embed), declared
+ * anywhere in `src/` with `button()`, `select()`, `modal()` or `embed()`,
+ * and exported: the name of the export is its id, so a file may declare
+ * several, each under its own export.
  */
-export const componentsConvention = {
-    folder: 'components',
+export const componentDeclaration = {
     one: 'component',
     many: 'components',
-    check(path) {
-        const parts = path.replace(/\.[^./]+$/, '').split('/');
-        if (parts.length < 2) {
-            fail(`This file is directly in src/components/. Put it in the folder of its kind: ${FOLDERS.map(one => `src/components/${one}/`).join(', ')}.`);
-        }
-        const folder = parts[0];
-        if (!Object.hasOwn(COMPONENT_FOLDERS, folder)) {
-            fail(`The folder src/components/${folder} is not a kind of component. Kinds are: ${FOLDERS.join(', ')}.`);
-        }
-        for (const part of parts) {
-            if (!NAME.test(part)) {
-                fail(`"${part}" can't be in the path of a component: use letters, digits, - and _ only. The path of the file is the id of the component.`);
-            }
-        }
-        if (path.replace(/\.[^./]+$/, '').length > Limits.CustomId - 20) {
-            fail(`The path of this file is ${path.length} characters long: Discord gives ${Limits.CustomId} characters to the id of a component and its data together. Shorten the names.`);
-        }
-    },
-    read(exports, path) {
-        const id = path.replace(/\.[^./]+$/, '');
-        const kind = COMPONENT_FOLDERS[id.split('/')[0]];
-        return readOne(kind, id, exports);
+    is: value => componentStateOf(value) !== undefined,
+    list: false,
+    read(value, site) {
+        return readOne(componentStateOf(value), value, site);
     },
 };
-/** The files that are the same component (through `(group)` folders): the later one is left out. */
+/** Two components of the same kind with the same name: the later one is left out. */
 export function findDuplicates(entries) {
     const seen = new Map();
     const conflicts = [];
     const valid = [...entries]
-        .sort((a, b) => (a.file < b.file ? -1 : 1))
+        .sort((a, b) => a.file === b.file
+        ? a.export < b.export
+            ? -1
+            : 1
+        : a.file < b.file
+            ? -1
+            : 1)
         .filter(entry => {
-        const first = seen.get(entry.component.path);
+        const key = `${entry.component.kind}:${entry.component.name}`;
+        const first = seen.get(key);
         if (!first) {
-            seen.set(entry.component.path, entry);
+            seen.set(key, entry);
             return true;
         }
         conflicts.push({
             file: entry.file,
-            message: `${entry.component.path} is already ${first.file}: two files can't be the same component. A folder in parentheses only groups files, it is not part of the id.`,
+            export: entry.export,
+            message: `There is already a ${WHAT[entry.component.kind]} named ${entry.component.name}, in ${first.file}: the name of the export is what tells a ${WHAT[entry.component.kind]} apart, so rename one of them.`,
         });
         return false;
     });
     return { valid, conflicts };
 }
-/** Whether a file holds an embed: nothing to route. */
+/** Whether a declaration is an embed: nothing to route. */
 export const isEmbedLoaded = (component) => component.kind === 'embed';
-export { isEmbedFile };
+export { isEmbedDeclaration };

package/dist/components/declared.d.ts

@@ -0,0 +1,29 @@
+import { type PieceKind, type Rendered } from './instance.js';
+/** The kinds of components a file declares. */
+export type ComponentKind = 'button' | 'select' | 'modal' | 'embed';
+/** A declared component as the loader knows it: what it declared, and once loaded, how to make instances. */
+export interface ComponentState {
+    readonly kind: ComponentKind;
+    readonly config: unknown;
+    /** What made it, for messages: `button()`. */
+    readonly made: string;
+    bound?: {
+        /** The name of the export that declares it: its id. */
+        name: string;
+        /** Makes an instance from what the component was called with. */
+        render: (args: readonly unknown[]) => Rendered | object;
+    };
+}
+/** The state of a declared component, if the value is one. */
+export declare function componentStateOf(value: unknown): ComponentState | undefined;
+/**
+ * Makes a declared component. `asPiece` says whether it stands for its
+ * instance by itself when it carries no data (a button, a menu, a modal:
+ * not an embed, which is only a function).
+ */
+export declare function createComponent(kind: ComponentKind, config: unknown, { asPiece, pieceKind }: {
+    asPiece: boolean;
+    pieceKind?: PieceKind;
+}): (...args: unknown[]) => unknown;
+/** Binds a declared component to its name and to what makes its instances. */
+export declare function bindComponent(declared: unknown, bound: NonNullable<ComponentState['bound']>): void;

package/dist/components/declared.js

@@ -0,0 +1,49 @@
+// What `button()`, `select()`, `modal()` and `embed()` return: a component,
+// declared in a file of the project. It is a function (called with the
+// data the component carries) that the loader recognises, checks, and binds
+// to the name of its export: that name is the custom_id. Until then it can't
+// make anything, which is how a component the framework never loaded is
+// refused.
+import { piece, pieceFunction, } from './instance.js';
+const STATE = Symbol.for('chapterjs.component.declared');
+/** The state of a declared component, if the value is one. */
+export function componentStateOf(value) {
+    if (typeof value !== 'function')
+        return undefined;
+    return value[STATE];
+}
+/**
+ * Makes a declared component. `asPiece` says whether it stands for its
+ * instance by itself when it carries no data (a button, a menu, a modal:
+ * not an embed, which is only a function).
+ */
+export function createComponent(kind, config, { asPiece, pieceKind }) {
+    const state = { kind, config, made: `${kind}()` };
+    const notBound = () => {
+        throw new Error(`This ${kind} was not loaded by ChapterJS: a ${kind} is exported from a file of src/ (export const name = ${kind}({ ... })), and used once the bot started.`);
+    };
+    const declared = (...args) => {
+        if (!state.bound)
+            return notBound();
+        const rendered = state.bound.render(args);
+        return pieceKind
+            ? piece(pieceKind, rendered.raw)
+            : rendered;
+    };
+    Object.defineProperty(declared, STATE, { value: state });
+    Object.defineProperty(declared, 'config', {
+        value: config,
+        enumerable: true,
+    });
+    if (asPiece) {
+        pieceFunction(declared, () => state.bound ? state.bound.render([]) : notBound());
+    }
+    return declared;
+}
+/** Binds a declared component to its name and to what makes its instances. */
+export function bindComponent(declared, bound) {
+    const state = componentStateOf(declared);
+    if (!state)
+        throw new TypeError('Not a component.');
+    state.bound = bound;
+}

package/dist/components/embed.d.ts

@@ -1,28 +1,29 @@
 import type { Embed } from '../structures/payload.js';
 /**
- * What `embed()` returns: the default export of an embed file. Import it
- * where you send a message: `embeds: [welcome({ member })]`, or
- * `embeds: [rules]` for an embed that always looks the same.
+ * What `embed()` returns: a declaration the framework finds in the exports
+ * of a file. Import it where you send a message: `embeds: [welcome({
+ * member })]`, or `embeds: [rules]` for an embed that always looks the
+ * same.
  */
-export type EmbedFile<Args extends readonly unknown[] = []> = {
+export type EmbedDeclaration<Args extends readonly unknown[] = []> = {
     /** What the file gave to `embed()`, not checked yet. */
     readonly config: unknown;
 } & ((...args: Args) => Embed);
 /**
- * Declares an embed. Export the result as the default export of a file of
- * `src/components/embeds/`. Give it the embed itself when it always looks
- * the same, or a function of what it shows:
+ * Declares an embed. Export the result from any file of `src/`. Give it
+ * the embed itself when it always looks the same, or a function of what it
+ * shows:
  *
  * ```ts
  * import { embed, type GuildMember } from 'chapterjs';
  *
- * export default embed((member: GuildMember) => ({
+ * export const welcome = embed((member: GuildMember) => ({
  *   title: `Welcome ${member.displayName}!`,
  *   color: 0x57f287,
  * }));
  * ```
  */
-export declare function embed(definition: Embed): EmbedFile<[]>;
-export declare function embed<const Args extends readonly unknown[]>(definition: (...args: Args) => Embed): EmbedFile<Args>;
-/** Whether a value is an embed file: a function to call for the embed. */
-export declare const isEmbedFile: (value: unknown) => value is EmbedFile<readonly unknown[]>;
+export declare function embed(definition: Embed): EmbedDeclaration<[]>;
+export declare function embed<const Args extends readonly unknown[]>(definition: (...args: Args) => Embed): EmbedDeclaration<Args>;
+/** Whether a value is a declared embed: a function to call for the embed. */
+export declare const isEmbedDeclaration: (value: unknown) => value is EmbedDeclaration<readonly unknown[]>;

package/dist/components/embed.js

@@ -1,11 +1,11 @@
-// `embed()`, as the files of `src/components/embeds/` import it from
-// 'chapterjs': an embed written once, used in every message that needs it.
+// `embed()`, as user files import it from 'chapterjs': an embed written
+// once, used in every message that needs it.
 // Static, or a function of what it shows.
-import { createFile, fileStateOf } from './file.js';
+import { createComponent, componentStateOf } from './declared.js';
 export function embed(definition) {
-    return createFile('embed', definition, {
+    return createComponent('embed', definition, {
         asPiece: false,
     });
 }
-/** Whether a value is an embed file: a function to call for the embed. */
-export const isEmbedFile = (value) => fileStateOf(value)?.kind === 'embed';
+/** Whether a value is a declared embed: a function to call for the embed. */
+export const isEmbedDeclaration = (value) => componentStateOf(value)?.kind === 'embed';

package/dist/components/instance.d.ts

@@ -9,9 +9,9 @@ export interface Piece<Kind extends string> {
     /** What kind of piece it is. Only the framework makes pieces. */
     readonly [brand]: Kind;
 }
-/** A button: of a file of `src/components/buttons/`, `linkButton()` or `premiumButton()`. */
+/** A button: declared with `button()`, or made with `linkButton()` or `premiumButton()`. */
 export type ButtonComponent = Piece<'button'>;
-/** A select menu of a file of `src/components/selects/`. */
+/** A select menu declared with `select()`. */
 export type SelectComponent = Piece<'select'>;
 /** A row of up to 5 buttons, or of one menu: `row()`. */
 export type ActionRowComponent = Piece<'row'>;
@@ -29,7 +29,7 @@ export type FileComponent = Piece<'file'>;
 export type SeparatorComponent = Piece<'separator'>;
 /** A box around other pieces, with an optional color: `container()`. */
 export type ContainerComponent = Piece<'container'>;
-/** A form to open with `interaction.showModal()`: of a file of `src/components/modals/`. */
+/** A form to open with `interaction.showModal()`: declared with `modal()`. */
 export type ModalComponent = Piece<'modal'>;
 /** What a container can hold. */
 export type ContainerChild = ButtonComponent | SelectComponent | ActionRowComponent | TextComponent | SectionComponent | GalleryComponent | FileComponent | SeparatorComponent;

package/dist/components/instance.js

@@ -1,5 +1,5 @@
 // What goes in the `components` of a message: pieces made by the framework
-// (a button of `src/components/buttons/`, a `row()`, a `container()`...),
+// (a button declared with `button()`, a `row()`, a `container()`...),
 // never raw JSON. Each piece knows the Discord shape it is sent as; the
 // brand is what lets a message refuse anything else, so that no custom_id
 // is ever written by hand.
@@ -47,7 +47,7 @@ export function isPiece(value) {
 /** What a piece is and how it is sent. Throws on anything else. */
 export function renderedOf(value, where) {
     if (!isPiece(value)) {
-        throw new TypeError(`${where} is not a component made by ChapterJS, got ${value === null ? 'null' : typeof value === 'object' && 'custom_id' in value ? 'an object with a custom_id' : typeof value}. Use the buttons, menus and modals of src/components/, and row(), text(), section(), container()... from 'chapterjs'. Components are never written as JSON.`);
+        throw new TypeError(`${where} is not a component made by ChapterJS, got ${value === null ? 'null' : typeof value === 'object' && 'custom_id' in value ? 'an object with a custom_id' : typeof value}. Use the buttons, menus and forms declared with button(), select() and modal(), and row(), text(), section(), container()... from 'chapterjs'. Components are never written as JSON.`);
     }
     const { kind, raw } = value;
     return { kind, raw };

package/dist/components/modal.d.ts

@@ -186,24 +186,24 @@ export interface ModalInstanceOptions<Fields extends ModalFields = ModalFields>
     values?: ModalPrefill<Fields>;
 }
 /**
- * What `modal()` returns: the default export of a modal file. Import it
- * where someone uses a command or a component, and open it:
+ * What `modal()` returns: a declaration the framework finds in the exports
+ * of a file. Import it where someone uses a command or a component, and
+ * open it:
  * `interaction.showModal(report({ userId }))`, or
  * `interaction.showModal(feedback)` for a form without data.
  */
-export type ModalFile<Fields extends ModalFields = ModalFields, Data extends DataShape = {}> = {
+export type ModalDeclaration<Fields extends ModalFields = ModalFields, Data extends DataShape = {}> = {
     /** What the file gave to `modal()`, not checked yet. */
     readonly config: unknown;
 } & ({} extends Data ? ((options?: ModalInstanceOptions<Fields>) => ModalComponent) & ModalComponent : {} extends DataInputOf<Data> ? ((data?: DataInputOf<Data>, options?: ModalInstanceOptions<Fields>) => ModalComponent) & ModalComponent : (data: DataInputOf<Data>, options?: ModalInstanceOptions<Fields>) => ModalComponent);
 /**
- * Declares a form. Export the result as the default export of a file of
- * `src/components/modals/`: the path of the file is what tells the form
- * apart, so you never write an id.
+ * Declares a form. Export the result from any file of `src/`: the name of
+ * the export is what tells the form apart, so you never write an id.
  *
  * ```ts
  * import { modal } from 'chapterjs';
  *
- * export default modal({
+ * export const feedback = modal({
  *   title: 'Feedback',
  *   fields: {
  *     text: { type: 'text', label: 'What do you think?', style: 'paragraph' },
@@ -214,7 +214,7 @@ export type ModalFile<Fields extends ModalFields = ModalFields, Data extends Dat
  * });
  * ```
  */
-export declare function modal<const Fields extends ModalFields, const Data extends DataShape = {}, const Where extends ComponentWhere = 'guild'>(config: ModalConfig<Fields, Data, Where>): ModalFile<Fields, Data>;
+export declare function modal<const Fields extends ModalFields, const Data extends DataShape = {}, const Where extends ComponentWhere = 'guild'>(config: ModalConfig<Fields, Data, Where>): ModalDeclaration<Fields, Data>;
 /** A field of a form, checked, with how it is sent. */
 export interface LoadedField {
     readonly name: string;
@@ -225,10 +225,11 @@ export interface LoadedField {
     readonly min: number;
     readonly max: number;
 }
-/** A modal file, checked. */
+/** A form, checked. */
 export interface LoadedModal {
     readonly kind: 'modal';
-    readonly path: string;
+    /** The name of the export that declares it: its id for Discord. */
+    readonly name: string;
     /** The title (45 characters at most): a text, or computed when the form opens. */
     readonly title: DynamicText;
     readonly fields: readonly LoadedField[];

package/dist/components/modal.js

@@ -5,18 +5,17 @@ import { Limits } from '../discord/api.js';
 import { ComponentType, TextInputStyle, } from '../discord/types/component.js';
 import { isDynamic, resolveText, } from './component.js';
 import { checkData, encodeCustomId, } from './custom-id.js';
-import { createFile } from './file.js';
+import { createComponent } from './declared.js';
 import { hasDynamicOption, readOptions, resolveOptions, } from './options.js';
 import { readChannelTypes, readPlaceholder, readRange, SELECT_TYPES, } from './select.js';
 /**
- * Declares a form. Export the result as the default export of a file of
- * `src/components/modals/`: the path of the file is what tells the form
- * apart, so you never write an id.
+ * Declares a form. Export the result from any file of `src/`: the name of
+ * the export is what tells the form apart, so you never write an id.
  *
  * ```ts
  * import { modal } from 'chapterjs';
  *
- * export default modal({
+ * export const feedback = modal({
  *   title: 'Feedback',
  *   fields: {
  *     text: { type: 'text', label: 'What do you think?', style: 'paragraph' },
@@ -28,7 +27,7 @@ import { readChannelTypes, readPlaceholder, readRange, SELECT_TYPES, } from './s
  * ```
  */
 export function modal(config) {
-    return createFile('modal', config, {
+    return createComponent('modal', config, {
         asPiece: true,
         pieceKind: 'modal',
     });
@@ -374,14 +373,14 @@ function readPrefill(loaded, name, given) {
 /** The form as Discord takes it, for the data and the values given. */
 export function renderModal(loaded, args) {
     const hasData = Object.keys(loaded.data).length > 0;
-    const name = loaded.path.split('/').pop();
+    const { name } = loaded;
     if (args.length > (hasData ? 2 : 1)) {
         fail(`${name} takes ${hasData ? 'its data, then options' : 'options'} at most.`);
     }
     const values = checkData(name, loaded.data, hasData ? args[0] : undefined);
     const prefill = readPrefill(loaded, name, hasData ? args[1] : args[0]);
     const make = (context) => ({
-        custom_id: encodeCustomId(loaded.path, loaded.data, values),
+        custom_id: encodeCustomId(loaded.name, loaded.data, values),
         title: resolveText(`The title of ${name}`, loaded.title, context, {
             max: Limits.ModalTitle,
         }),

package/dist/components/router.d.ts

@@ -1,10 +1,11 @@
 import { type RawInteraction } from '../discord/types/interaction.js';
 import { type Reporter } from '../interactions/dispatch.js';
 import type { Context } from '../structures/context.js';
-import type { LoadedComponent } from './convention.js';
-/** A component, with the file it comes from (to report its errors). */
+import type { LoadedComponent } from './declaration.js';
+/** A component, with the file and the export it comes from (to report its errors). */
 export interface ComponentEntry {
     file: string;
+    export: string;
     component: LoadedComponent;
 }
 export type ComponentRouterOptions = Reporter;

package/dist/components/router.js

@@ -1,6 +1,6 @@
 // Runs the component someone used: reads the id the framework wrote in it,
-// finds its file, turns what Discord sent into what `run` receives, and
-// makes sure the person always gets an answer.
+// finds its declaration, turns what Discord sent into what `run` receives,
+// and makes sure the person always gets an answer.
 import { ComponentType, } from '../discord/types/component.js';
 import { InteractionType, } from '../discord/types/interaction.js';
 import { MessageFlags } from '../discord/types/message.js';
@@ -12,11 +12,10 @@ import { toCamelCase } from '../util/case.js';
 import { decodeCustomId, readData } from './custom-id.js';
 import { SELECT_TYPES } from './select.js';
 /** What a component is called, for the person and the developer. */
-const WHAT = {
+const WHAT_OF = {
     button: 'button',
     select: 'menu',
     modal: 'form',
-    embed: 'embed',
 };
 export class ComponentRouter {
     #components = new Map();
@@ -29,7 +28,7 @@ export class ComponentRouter {
         const components = new Map();
         for (const entry of entries) {
             if (entry.component.kind !== 'embed') {
-                components.set(entry.component.path, entry);
+                components.set(`${entry.component.kind}:${entry.component.name}`, entry);
             }
         }
         this.#components = components;
@@ -59,14 +58,17 @@ export class ComponentRouter {
             MessageFlags.Ephemeral) !==
             0;
         const ephemeralOf = (component) => isPrivate || ('ephemeral' in component && component.ephemeral);
-        const { path, parts } = decodeCustomId(data.custom_id);
-        const entry = this.#components.get(path);
-        const what = isModal
-            ? 'form'
+        const { name, parts } = decodeCustomId(data.custom_id);
+        // A button, a menu and a form may share a name: what was used says
+        // which one is meant.
+        const kind = isModal
+            ? 'modal'
             : data.component_type ===
                 ComponentType.Button
                 ? 'button'
-                : 'menu';
+                : 'select';
+        const entry = this.#components.get(`${kind}:${name}`);
+        const what = WHAT_OF[kind];
         const interaction = isModal
             ? new ModalInteraction(ctx, rest, user, {
                 ephemeral: entry ? ephemeralOf(entry.component) : isPrivate,
@@ -81,27 +83,20 @@ export class ComponentRouter {
         // Embeds are never in the map: what is left has a `run`.
         if (!entry ||
             entry.component.kind === 'embed' ||
-            (isModal
-                ? entry.component.kind !== 'modal'
-                : entry.component.kind === 'modal') ||
-            (entry.component.kind === 'button' &&
-                data.component_type !==
-                    ComponentType.Button) ||
             (entry.component.kind === 'select' &&
                 SELECT_TYPES[entry.component.type] !==
                     data.component_type)) {
-            // Sent before the file was renamed, removed or changed of kind.
+            // Sent before the export was renamed, removed or changed of kind.
             refuse(interaction, 'gone', { what });
             return;
         }
         const { component, file } = entry;
         const values = readData(component.data, parts);
         if (!values) {
-            // The data of the file changed since the message was sent.
+            // The data of the component changed since the message was sent.
             refuse(interaction, 'outdated', { what });
             return;
         }
-        const name = component.path;
         const placed = resolvePlace(ctx, raw, user, author.member, component.where, warning => this.#options.onWarning(file, `${name} ${warning}`));
         if (!placed.place) {
             refuse(interaction, placed.refusal, { what });