@forgebook/nuxt 0.0.0-stage → 0.2.1

package/dist/src/app/state.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Nuxt's state and app composables in a catalogue: `useState`, `useCookie`, `useRuntimeConfig`, `useAppConfig`,
+ * `useNuxtApp`, `callOnce`, `onNuxtReady` and the request's composables.
+ *
+ * @remarks
+ * A story gives what they start with (`parameters.nuxt.state`, `cookies`, `runtimeConfig`, `appConfig`), over what
+ * the project gives. Every value lives in the story's store, so two components of one story share a key, as two
+ * components of a Nuxt page do, and a story drawn anew starts over. A cookie is never written to the frame's document:
+ * the story's store keeps it, so a story cannot leave one behind for the next.
+ *
+ * The page has no request: `useRequestHeaders` returns none and `useRequestEvent` nothing, as in Nuxt's browser code.
+ *
+ * Internal: the code the plugin writes imports it (`#imports`, `#app`, `#components`); a story or a component imports
+ * Nuxt's names as in the app, never this module, whose exports may change in any release.
+ *
+ * @module
+ */
+import { type Ref } from "vue";
+import { type NuxtAppStandIn } from "../nuxtStore.ts";
+import type { PublicRuntimeConfig } from "../project.ts";
+import type { StoryFetch } from "../storyFetch.ts";
+/**
+ * A value shared by every component of the story under a key, starting with the story's value for the key, else
+ * `init`'s.
+ *
+ * @param key - the key.
+ * @param init - the value it starts with.
+ */
+export declare function useState<TValue>(key: string, init?: () => TValue): Ref<TValue>;
+/**
+ * A value of its own, under a key of its own.
+ *
+ * @param init - the value it starts with.
+ */
+export declare function useState<TValue>(init?: () => TValue): Ref<TValue>;
+/**
+ * Empties the state of keys.
+ *
+ * @param keys - a key, keys, or none for all.
+ */
+export declare const clearNuxtState: (keys?: string | readonly string[]) => void;
+/** What `useCookie` takes besides a name. */
+export type CookieOptions<TValue> = {
+    /** The value when the story gives none. */
+    readonly default?: () => TValue;
+    /** Whether the ref can be written: no effect, it always can. */
+    readonly readonly?: boolean;
+    /** Nuxt's other cookie options (`maxAge`, `path`, `sameSite`…): no effect, the cookie stays in the story. */
+    readonly [option: string]: unknown;
+};
+/**
+ * A cookie: the story's value for the name, else the default; written in the story only.
+ *
+ * @param name - the cookie's name.
+ * @param options - its default.
+ */
+export declare function useCookie<TValue = string | null | undefined>(name: string, options?: CookieOptions<TValue>): Ref<TValue>;
+/** Reads a cookie again from the document: it lives in the story, so there is nothing to read. */
+export declare const refreshCookie: () => void;
+/** The runtime config: the project's public values and app paths, the story's public values over them. */
+export declare const useRuntimeConfig: () => PublicRuntimeConfig;
+/** The app config: the project's `app.config` and `appConfig`, the story's over them. */
+export declare const useAppConfig: () => Record<string, unknown>;
+/**
+ * Changes the app config, as Nuxt's `updateAppConfig`.
+ *
+ * @param values - the values, over the config's.
+ */
+export declare const updateAppConfig: (values: Readonly<Record<string, unknown>>) => void;
+/** The story's app: its payload, its config, its router, what plugins would have provided. */
+export declare const useNuxtApp: () => NuxtAppStandIn;
+/** The story's app, which there always is in a story. */
+export declare const tryUseNuxtApp: () => NuxtAppStandIn;
+/**
+ * Runs a function once for the story, as Nuxt runs one once for a request.
+ *
+ * @param first - the key it runs once under, or the function, keyed by its place in the code.
+ * @param second - the function, or the key the plugin wrote for the call's place.
+ * @param third - the key the plugin wrote for the call's place, after the options.
+ */
+export declare const callOnce: (first: string | (() => unknown), second?: (() => unknown) | Readonly<Record<string, unknown>> | string, third?: string) => Promise<void>;
+/**
+ * Runs a function once the story is drawn, as Nuxt runs it once the app is.
+ *
+ * @param run - the function.
+ */
+export declare const onNuxtReady: (run: () => unknown) => void;
+/** The request's headers: there is no request in the page, so none. */
+export declare const useRequestHeaders: () => Record<string, string>;
+/** One of the request's headers: there is no request in the page, so none. */
+export declare const useRequestHeader: () => undefined;
+/** The request: none in the page. */
+export declare const useRequestEvent: () => undefined;
+/** The `$fetch` that passes the request's headers on: `$fetch` itself, as in Nuxt's browser code. */
+export declare const useRequestFetch: () => StoryFetch;
+/** The address the story's route has, on the frame's origin. */
+export declare const useRequestURL: () => URL;
+/** Whether the page was prerendered: never, in a story. */
+export declare const isPrerendered: () => boolean;
+/** The loading indicator's state: nothing loads between pages in a story. */
+export declare const useLoadingIndicator: () => {
+    readonly progress: Ref<number>;
+    readonly isLoading: Ref<boolean>;
+    readonly start: () => void;
+    readonly finish: () => void;
+    readonly clear: () => void;
+};

package/dist/src/app/state.js

@@ -0,0 +1,137 @@
+/**
+ * Nuxt's state and app composables in a catalogue: `useState`, `useCookie`, `useRuntimeConfig`, `useAppConfig`,
+ * `useNuxtApp`, `callOnce`, `onNuxtReady` and the request's composables.
+ *
+ * @remarks
+ * A story gives what they start with (`parameters.nuxt.state`, `cookies`, `runtimeConfig`, `appConfig`), over what
+ * the project gives. Every value lives in the story's store, so two components of one story share a key, as two
+ * components of a Nuxt page do, and a story drawn anew starts over. A cookie is never written to the frame's document:
+ * the story's store keeps it, so a story cannot leave one behind for the next.
+ *
+ * The page has no request: `useRequestHeaders` returns none and `useRequestEvent` nothing, as in Nuxt's browser code.
+ *
+ * Internal: the code the plugin writes imports it (`#imports`, `#app`, `#components`); a story or a component imports
+ * Nuxt's names as in the app, never this module, whose exports may change in any release.
+ *
+ * @module
+ */
+import { onMounted, ref } from "vue";
+import { useNuxtStore } from "../nuxtStore.js";
+/**
+ * The first of two arguments that is a function: the one a call gives where the key may come first or not.
+ *
+ * @param first - the first argument.
+ * @param second - the second.
+ */
+const firstFunction = (first, second) => {
+    if (typeof first === "function")
+        return () => Reflect.apply(first, undefined, []);
+    if (typeof second === "function")
+        return () => Reflect.apply(second, undefined, []);
+    return undefined;
+};
+export function useState(first, second) {
+    const store = useNuxtStore();
+    // a text after the init is the key the plugin wrote for the call's place
+    const placeKey = typeof second === "string" ? second : undefined;
+    const key = typeof first === "string" ? first : (placeKey ?? store.nextKey("state"));
+    const init = firstFunction(first, second);
+    const known = store.state.get(key);
+    if (known !== undefined)
+        return known;
+    const value = ref(Object.hasOwn(store.storyState, key) ? store.storyState[key] : init?.());
+    store.state.set(key, value);
+    return value;
+}
+/**
+ * Empties the state of keys.
+ *
+ * @param keys - a key, keys, or none for all.
+ */
+export const clearNuxtState = (keys) => {
+    const { state } = useNuxtStore();
+    const given = typeof keys === "string" ? [keys] : keys;
+    for (const key of given ?? [...state.keys()]) {
+        const value = state.get(key);
+        if (value !== undefined)
+            value.value = undefined;
+    }
+};
+export function useCookie(name, options = {}) {
+    const { cookies, storyCookies } = useNuxtStore();
+    const known = cookies.get(name);
+    if (known !== undefined)
+        return known;
+    const value = ref(Object.hasOwn(storyCookies, name) ? storyCookies[name] : options.default?.());
+    cookies.set(name, value);
+    return value;
+}
+/** Reads a cookie again from the document: it lives in the story, so there is nothing to read. */
+export const refreshCookie = () => undefined;
+/** The runtime config: the project's public values and app paths, the story's public values over them. */
+export const useRuntimeConfig = () => useNuxtStore().runtimeConfig;
+/** The app config: the project's `app.config` and `appConfig`, the story's over them. */
+export const useAppConfig = () => useNuxtStore().appConfig;
+/**
+ * Changes the app config, as Nuxt's `updateAppConfig`.
+ *
+ * @param values - the values, over the config's.
+ */
+export const updateAppConfig = (values) => {
+    Object.assign(useNuxtStore().appConfig, values);
+};
+/** The story's app: its payload, its config, its router, what plugins would have provided. */
+export const useNuxtApp = () => useNuxtStore().nuxtApp;
+/** The story's app, which there always is in a story. */
+export const tryUseNuxtApp = () => useNuxtStore().nuxtApp;
+/**
+ * Runs a function once for the story, as Nuxt runs one once for a request.
+ *
+ * @param first - the key it runs once under, or the function, keyed by its place in the code.
+ * @param second - the function, or the key the plugin wrote for the call's place.
+ * @param third - the key the plugin wrote for the call's place, after the options.
+ */
+export const callOnce = async (first, second, third) => {
+    const { once, nextKey } = useNuxtStore();
+    const placeKey = typeof second === "string" ? second : third;
+    const key = typeof first === "string" ? first : (placeKey ?? nextKey("once"));
+    const work = firstFunction(first, second);
+    if (once.has(key) || work === undefined)
+        return;
+    once.add(key);
+    await work();
+};
+/**
+ * Runs a function once the story is drawn, as Nuxt runs it once the app is.
+ *
+ * @param run - the function.
+ */
+export const onNuxtReady = (run) => {
+    onMounted(() => {
+        void run();
+    });
+};
+/** The request's headers: there is no request in the page, so none. */
+export const useRequestHeaders = () => ({});
+/** One of the request's headers: there is no request in the page, so none. */
+export const useRequestHeader = () => undefined;
+/** The request: none in the page. */
+export const useRequestEvent = () => undefined;
+/** The `$fetch` that passes the request's headers on: `$fetch` itself, as in Nuxt's browser code. */
+export const useRequestFetch = () => useNuxtStore().fetch;
+/** The address the story's route has, on the frame's origin. */
+export const useRequestURL = () => {
+    const { router, runtimeConfig } = useNuxtStore();
+    const base = runtimeConfig.app.baseURL.replace(/\/$/, "");
+    return new URL(`${base}${router.currentRoute.value.fullPath}`, globalThis.location?.origin ?? "http://localhost");
+};
+/** Whether the page was prerendered: never, in a story. */
+export const isPrerendered = () => false;
+/** The loading indicator's state: nothing loads between pages in a story. */
+export const useLoadingIndicator = () => ({
+    progress: ref(0),
+    isLoading: ref(false),
+    start: () => undefined,
+    finish: () => undefined,
+    clear: () => undefined
+});

package/dist/src/asyncDataRun.d.ts

@@ -0,0 +1,39 @@
+import type { AsyncDataEntry, NuxtAppStandIn, NuxtStore } from "./nuxtStore.ts";
+/** The handler of `useAsyncData`: what fetches the data. */
+export type AsyncDataHandler<TResult> = (nuxtApp: NuxtAppStandIn, context: {
+    readonly signal: AbortSignal;
+}) => Promise<TResult> | TResult;
+/** What a run does with what the handler returned. */
+export type RunOptions = {
+    /** The data before the handler returns, and after a failure. */
+    readonly default?: () => unknown;
+    /** Changes what the handler returned. */
+    readonly transform?: (input: unknown) => unknown;
+    /** The keys of the result kept; all by default. */
+    readonly pick?: readonly string[];
+};
+/**
+ * The entry of a key: the one a call made before, or a new one.
+ *
+ * @param store - the story's store.
+ * @param key - the key.
+ * @param defaultData - the data a new entry starts with.
+ */
+export declare const entryOf: (store: NuxtStore, key: string, defaultData: () => unknown) => AsyncDataEntry;
+/**
+ * Starts a run of a key's handler, and keeps it as the run under way until it ends.
+ *
+ * @param store - the story's store.
+ * @param entry - the key's entry.
+ * @param key - the key.
+ * @param handler - what fetches the data.
+ * @param options - what is done with the result.
+ */
+export declare const startRun: (store: NuxtStore, entry: AsyncDataEntry, key: string, handler: AsyncDataHandler<unknown> | undefined, options: RunOptions) => Promise<void>;
+/**
+ * The run a call waits for: the one under way for its key, a new one when the key has not run or failed, else none.
+ *
+ * @param entry - the key's entry.
+ * @param start - what starts a run.
+ */
+export declare const waitedRun: (entry: AsyncDataEntry, start: () => Promise<void>) => Promise<void>;

package/dist/src/asyncDataRun.js

@@ -0,0 +1,128 @@
+/**
+ * The runs of `useAsyncData`'s keys: the entry a key's calls share, and a run of its handler that a later run
+ * replaces.
+ *
+ * @remarks
+ * Runs of one key can overlap (a refresh while the first is under way, a watched value that changes twice): each run
+ * gets a number and its own `AbortController`, a new run aborts the one before, and a run that is no longer the latest
+ * drops what it got, so the data on screen is always the latest run's.
+ *
+ * @module
+ */
+import { ref } from "vue";
+import { createError } from "./nuxtError.js";
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/**
+ * The keys of a result kept, as `pick` says.
+ *
+ * @param value - the result.
+ * @param keys - the keys.
+ */
+const picked = (value, keys) => keys === undefined || !isRecord(value)
+    ? value
+    : Object.fromEntries(keys.filter((key) => Object.hasOwn(value, key)).map((key) => [key, value[key]]));
+/**
+ * The entry of a key: the one a call made before, or a new one.
+ *
+ * @param store - the story's store.
+ * @param key - the key.
+ * @param defaultData - the data a new entry starts with.
+ */
+export const entryOf = (store, key, defaultData) => {
+    const known = store.asyncData.get(key);
+    if (known !== undefined)
+        return known;
+    const entry = {
+        data: ref(defaultData()),
+        status: ref("idle"),
+        error: ref(undefined),
+        defaultData,
+        running: undefined,
+        runId: 0,
+        controller: undefined,
+        refresh: undefined
+    };
+    store.asyncData.set(key, entry);
+    return entry;
+};
+/**
+ * What a handler returned, changed as the options say.
+ *
+ * @param result - what it returned.
+ * @param options - its `transform` and `pick`.
+ */
+const shaped = async (result, options) => {
+    const transformed = options.transform === undefined ? result : await options.transform(result);
+    return picked(transformed, options.pick);
+};
+/**
+ * Runs a key's handler, or gives it the story's data: what it returned, transformed and picked, or the error it threw.
+ * A run that a later one replaced keeps nothing.
+ *
+ * @param store - the story's store, the call's own: a refresh from an event handler has no component to find it.
+ * @param entry - the key's entry.
+ * @param key - the key.
+ * @param handler - what fetches the data.
+ * @param options - what is done with the result.
+ */
+const runHandler = async (store, entry, key, handler, options) => {
+    entry.runId += 1;
+    const id = entry.runId;
+    entry.controller?.abort();
+    const controller = new AbortController();
+    entry.controller = controller;
+    if (Object.hasOwn(store.storyData, key)) {
+        entry.data.value = store.storyData[key];
+        entry.error.value = undefined;
+        entry.status.value = "success";
+        return;
+    }
+    if (handler === undefined || store.isServer)
+        return;
+    entry.status.value = "pending";
+    try {
+        const result = await shaped(await handler(store.nuxtApp, { signal: controller.signal }), options);
+        if (entry.runId !== id)
+            return;
+        entry.data.value = result;
+        entry.error.value = undefined;
+        entry.status.value = "success";
+    }
+    catch (error) {
+        if (entry.runId !== id)
+            return;
+        entry.data.value = options.default?.() ?? entry.defaultData();
+        entry.error.value = createError(error);
+        entry.status.value = "error";
+    }
+};
+/**
+ * Starts a run of a key's handler, and keeps it as the run under way until it ends.
+ *
+ * @param store - the story's store.
+ * @param entry - the key's entry.
+ * @param key - the key.
+ * @param handler - what fetches the data.
+ * @param options - what is done with the result.
+ */
+export const startRun = (store, entry, key, handler, options) => {
+    const running = runHandler(store, entry, key, handler, options).finally(() => {
+        // only the latest run clears it: an older one ending must not say nothing runs
+        if (entry.running === running)
+            entry.running = undefined;
+    });
+    entry.running = running;
+    return running;
+};
+/**
+ * The run a call waits for: the one under way for its key, a new one when the key has not run or failed, else none.
+ *
+ * @param entry - the key's entry.
+ * @param start - what starts a run.
+ */
+export const waitedRun = (entry, start) => {
+    if (entry.running !== undefined)
+        return entry.running;
+    return entry.status.value === "idle" || entry.status.value === "error" ? start() : Promise.resolve();
+};

package/dist/src/nuxtError.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Nuxt's error, as `createError` makes it and `useError` returns it: an `Error` with an HTTP status and data.
+ *
+ * @module
+ */
+/** What `createError` takes besides a message: Nuxt's fields, each optional. */
+export type NuxtErrorInput = {
+    /** The message. */
+    readonly message?: string;
+    /** The HTTP status; 500 by default. */
+    readonly statusCode?: number;
+    /** The HTTP status's text. */
+    readonly statusMessage?: string;
+    /** Whether the error replaces the page with Nuxt's error page; `false` by default. */
+    readonly fatal?: boolean;
+    /** What the error carries for the page that shows it. */
+    readonly data?: unknown;
+    /** What caused it. */
+    readonly cause?: unknown;
+};
+/** An error as Nuxt makes it. */
+export declare class NuxtError extends Error {
+    /** The HTTP status. */
+    readonly statusCode: number;
+    /** The HTTP status's text. */
+    readonly statusMessage: string | undefined;
+    /** Whether it replaces the page. */
+    readonly fatal: boolean;
+    /** What it carries. */
+    readonly data: unknown;
+    /**
+     * An error from Nuxt's fields.
+     *
+     * @param input - the message and the fields.
+     */
+    constructor(input: NuxtErrorInput);
+}
+/**
+ * An error as Nuxt makes it: from a message, Nuxt's fields, or another error (kept as its cause).
+ *
+ * @param input - the message, the fields or the error.
+ * @returns the error; a `NuxtError` given is returned as it is.
+ */
+export declare const createError: (input: string | NuxtErrorInput | Error | unknown) => NuxtError;
+/**
+ * Whether a value is an error Nuxt made.
+ *
+ * @param value - the value.
+ */
+export declare const isNuxtError: (value: unknown) => value is NuxtError;

package/dist/src/nuxtError.js

@@ -0,0 +1,65 @@
+/**
+ * Nuxt's error, as `createError` makes it and `useError` returns it: an `Error` with an HTTP status and data.
+ *
+ * @module
+ */
+/** An error as Nuxt makes it. */
+export class NuxtError extends Error {
+    /** The HTTP status. */
+    statusCode;
+    /** The HTTP status's text. */
+    statusMessage;
+    /** Whether it replaces the page. */
+    fatal;
+    /** What it carries. */
+    data;
+    /**
+     * An error from Nuxt's fields.
+     *
+     * @param input - the message and the fields.
+     */
+    constructor(input) {
+        super(input.message ?? input.statusMessage ?? "", { cause: input.cause });
+        this.name = "NuxtError";
+        this.statusCode = input.statusCode ?? 500;
+        this.statusMessage = input.statusMessage;
+        this.fatal = input.fatal ?? false;
+        this.data = input.data;
+    }
+}
+/** Whether a value is a plain object. */
+const isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/**
+ * Nuxt's fields read from an error another library threw (a fetch's `FetchError` has `statusCode` and `data`).
+ *
+ * @param value - the error.
+ */
+const fieldsOf = (value) => ({
+    ...(typeof value["message"] === "string" ? { message: value["message"] } : {}),
+    ...(typeof value["statusCode"] === "number" ? { statusCode: value["statusCode"] } : {}),
+    ...(typeof value["statusMessage"] === "string" ? { statusMessage: value["statusMessage"] } : {}),
+    ...(typeof value["fatal"] === "boolean" ? { fatal: value["fatal"] } : {}),
+    ...("data" in value ? { data: value["data"] } : {})
+});
+/**
+ * An error as Nuxt makes it: from a message, Nuxt's fields, or another error (kept as its cause).
+ *
+ * @param input - the message, the fields or the error.
+ * @returns the error; a `NuxtError` given is returned as it is.
+ */
+export const createError = (input) => {
+    if (input instanceof NuxtError)
+        return input;
+    if (typeof input === "string")
+        return new NuxtError({ message: input });
+    // read field by field: a fetch error's status is a getter, which a spread would not copy
+    if (input instanceof Error && isRecord(input))
+        return new NuxtError({ ...fieldsOf(input), cause: input });
+    return new NuxtError(isRecord(input) ? fieldsOf(input) : { message: String(input) });
+};
+/**
+ * Whether a value is an error Nuxt made.
+ *
+ * @param value - the value.
+ */
+export const isNuxtError = (value) => value instanceof NuxtError;

package/dist/src/nuxtRenderer.d.ts

@@ -0,0 +1,14 @@
+import type { StoryRenderer } from "forgebook/renderer";
+import type { NuxtProject } from "./project.ts";
+/**
+ * Forgebook's renderer for a Nuxt project.
+ *
+ * @remarks
+ * The apps of one story drawn at once (the cells of a matrix) share its store, so an event handler, which has no
+ * component to find its store by, moves the same router whichever cell it is in; once the last of them is taken away,
+ * the story drawn anew starts over with a store of its own.
+ *
+ * @param project - what the page knows of the project: its routes, config and components.
+ * @returns the renderer.
+ */
+export declare const createNuxtRenderer: (project: NuxtProject) => StoryRenderer;

package/dist/src/nuxtRenderer.js

@@ -0,0 +1,67 @@
+/**
+ * Forgebook's renderer for a Nuxt project: Vue's renderer, each story's app given its Nuxt (`nuxtStore.ts`): its router
+ * at the story's route, its data, state and config, Nuxt's components and the project's.
+ *
+ * @remarks
+ * A story's Nuxt is made when its app is, so a story drawn again with other args keeps where its links took it, and
+ * one drawn anew starts over at its own route. Its calls go to the catalogue's Events tab. The project's components are
+ * registered on the app too, loaded when first drawn, so a story's own template (`template: "<BaseButton />"`) finds
+ * them as a Nuxt page's does; a component file finds them through the plugin, which imports what its template names.
+ *
+ * @module
+ */
+import { createVueRenderer } from "@forgebook/vue/renderer";
+import { defineAsyncComponent } from "vue";
+import { BUILT_IN_COMPONENTS } from "./app/components.js";
+import { createNuxtStore, setCurrentStore } from "./nuxtStore.js";
+/**
+ * Forgebook's renderer for a Nuxt project.
+ *
+ * @remarks
+ * The apps of one story drawn at once (the cells of a matrix) share its store, so an event handler, which has no
+ * component to find its store by, moves the same router whichever cell it is in; once the last of them is taken away,
+ * the story drawn anew starts over with a store of its own.
+ *
+ * @param project - what the page knows of the project: its routes, config and components.
+ * @returns the renderer.
+ */
+export const createNuxtRenderer = (project) => {
+    const shared = new Map();
+    const storeFor = (drawing, place) => {
+        // a server render is never taken away, so each has a store of its own
+        if (place === "server")
+            return { store: createNuxtStore(project, drawing.story.parameters, drawing.onEvent, place), apps: 0 };
+        const id = drawing.identity.id;
+        const known = shared.get(id);
+        if (known !== undefined)
+            return known;
+        const created = {
+            store: createNuxtStore(project, drawing.story.parameters, drawing.onEvent, place),
+            apps: 0
+        };
+        shared.set(id, created);
+        return created;
+    };
+    return createVueRenderer({
+        prepareApp: (app, drawing, place) => {
+            const entry = storeFor(drawing, place);
+            entry.apps += 1;
+            const { unmount } = app;
+            app.unmount = () => {
+                unmount();
+                entry.apps -= 1;
+                if (entry.apps === 0 && shared.get(drawing.identity.id) === entry)
+                    shared.delete(drawing.identity.id);
+            };
+            setCurrentStore(entry.store);
+            entry.store.install(app);
+            for (const [name, component] of Object.entries(BUILT_IN_COMPONENTS))
+                app.component(name, component);
+            for (const [name, load] of Object.entries(project.components)) {
+                const component = defineAsyncComponent(load);
+                app.component(name, component);
+                app.component(`Lazy${name}`, component);
+            }
+        }
+    });
+};