npm - @alepha/react - Versions diffs - 0.11.10 → 0.11.12 - Mend

@alepha/react 0.11.10 → 0.11.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

package/README.md +1 -183
package/dist/auth/index.browser.js +1460 -0
package/dist/auth/index.browser.js.map +1 -0
package/dist/auth/index.cjs +3647 -0
package/dist/auth/index.cjs.map +1 -0
package/dist/auth/index.d.cts +564 -0
package/dist/auth/index.d.cts.map +1 -0
package/dist/auth/index.d.ts +564 -0
package/dist/auth/index.d.ts.map +1 -0
package/dist/auth/index.js +3615 -0
package/dist/auth/index.js.map +1 -0
package/dist/{index.browser.js → core/index.browser.js} +36 -35
package/dist/core/index.browser.js.map +1 -0
package/dist/{index.cjs → core/index.cjs} +141 -140
package/dist/core/index.cjs.map +1 -0
package/dist/{index.d.cts → core/index.d.cts} +68 -68
package/dist/core/index.d.cts.map +1 -0
package/dist/{index.d.ts → core/index.d.ts} +68 -68
package/dist/core/index.d.ts.map +1 -0
package/dist/{index.js → core/index.js} +39 -38
package/dist/core/index.js.map +1 -0
package/dist/form/index.cjs +2054 -0
package/dist/form/index.cjs.map +1 -0
package/dist/form/index.d.cts +211 -0
package/dist/form/index.d.cts.map +1 -0
package/dist/form/index.d.ts +211 -0
package/dist/form/index.d.ts.map +1 -0
package/dist/form/index.js +2026 -0
package/dist/form/index.js.map +1 -0
package/dist/head/index.browser.js +1503 -0
package/dist/head/index.browser.js.map +1 -0
package/dist/head/index.cjs +1908 -0
package/dist/head/index.cjs.map +1 -0
package/dist/head/index.d.cts +595 -0
package/dist/head/index.d.cts.map +1 -0
package/dist/head/index.d.ts +601 -0
package/dist/head/index.d.ts.map +1 -0
package/dist/head/index.js +1880 -0
package/dist/head/index.js.map +1 -0
package/dist/i18n/index.cjs +1886 -0
package/dist/i18n/index.cjs.map +1 -0
package/dist/i18n/index.d.cts +168 -0
package/dist/i18n/index.d.cts.map +1 -0
package/dist/i18n/index.d.ts +168 -0
package/dist/i18n/index.d.ts.map +1 -0
package/dist/i18n/index.js +1857 -0
package/dist/i18n/index.js.map +1 -0
package/dist/websocket/index.cjs +1774 -0
package/dist/websocket/index.cjs.map +1 -0
package/dist/websocket/index.d.cts +118 -0
package/dist/websocket/index.d.cts.map +1 -0
package/dist/websocket/index.d.ts +118 -0
package/dist/websocket/index.d.ts.map +1 -0
package/dist/websocket/index.js +1750 -0
package/dist/websocket/index.js.map +1 -0
package/package.json +89 -67
package/src/auth/descriptors/$auth.ts +436 -0
package/src/auth/descriptors/$authApple.ts +8 -0
package/src/auth/descriptors/$authGithub.ts +81 -0
package/src/auth/descriptors/$authGoogle.ts +38 -0
package/src/auth/errors/SessionExpiredError.ts +6 -0
package/src/auth/hooks/useAuth.ts +31 -0
package/src/auth/index.browser.ts +16 -0
package/src/auth/index.shared.ts +3 -0
package/src/auth/index.ts +47 -0
package/src/auth/providers/ReactAuthProvider.ts +629 -0
package/src/auth/schemas/tokenResponseSchema.ts +11 -0
package/src/auth/schemas/tokensSchema.ts +21 -0
package/src/auth/schemas/userinfoResponseSchema.ts +10 -0
package/src/auth/services/ReactAuth.ts +124 -0
package/src/{components → core/components}/ErrorViewer.tsx +3 -2
package/src/{components → core/components}/NestedView.tsx +1 -1
package/src/{contexts → core/contexts}/AlephaContext.ts +1 -1
package/src/{descriptors → core/descriptors}/$page.ts +4 -4
package/src/{hooks → core/hooks}/useAction.ts +1 -1
package/src/{hooks → core/hooks}/useAlepha.ts +1 -1
package/src/{hooks → core/hooks}/useClient.ts +1 -1
package/src/{hooks → core/hooks}/useEvents.ts +1 -1
package/src/{hooks → core/hooks}/useInject.ts +1 -1
package/src/{hooks → core/hooks}/useQueryParams.ts +1 -1
package/src/{hooks → core/hooks}/useRouterState.ts +1 -1
package/src/{hooks → core/hooks}/useSchema.ts +3 -3
package/src/{hooks → core/hooks}/useStore.ts +2 -2
package/src/{index.browser.ts → core/index.browser.ts} +4 -4
package/src/{index.ts → core/index.ts} +6 -6
package/src/{providers → core/providers}/ReactBrowserProvider.ts +6 -6
package/src/{providers → core/providers}/ReactBrowserRendererProvider.ts +2 -2
package/src/{providers → core/providers}/ReactBrowserRouterProvider.ts +3 -3
package/src/{providers → core/providers}/ReactPageProvider.ts +3 -3
package/src/{providers → core/providers}/ReactServerProvider.ts +7 -7
package/src/{services → core/services}/ReactPageServerService.ts +2 -2
package/src/{services → core/services}/ReactPageService.ts +1 -1
package/src/{services → core/services}/ReactRouter.ts +1 -1
package/src/form/components/FormState.tsx +17 -0
package/src/form/hooks/useForm.ts +47 -0
package/src/form/hooks/useFormState.ts +130 -0
package/src/form/index.ts +38 -0
package/src/form/services/FormModel.ts +548 -0
package/src/head/descriptors/$head.ts +25 -0
package/src/head/hooks/useHead.ts +62 -0
package/src/head/index.browser.ts +25 -0
package/src/head/index.ts +47 -0
package/src/head/interfaces/Head.ts +46 -0
package/src/head/providers/BrowserHeadProvider.ts +105 -0
package/src/head/providers/HeadProvider.ts +73 -0
package/src/head/providers/ServerHeadProvider.ts +109 -0
package/src/i18n/README.md +76 -0
package/src/i18n/components/Localize.tsx +35 -0
package/src/i18n/descriptors/$dictionary.ts +65 -0
package/src/i18n/hooks/useI18n.ts +18 -0
package/src/i18n/index.ts +34 -0
package/src/i18n/providers/I18nProvider.ts +277 -0
package/src/websocket/hooks/useRoom.tsx +223 -0
package/src/websocket/index.ts +7 -0
package/dist/index.browser.js.map +0 -1
package/dist/index.cjs.map +0 -1
package/dist/index.d.cts.map +0 -1
package/dist/index.d.ts.map +0 -1
package/dist/index.js.map +0 -1
/package/src/{components → core/components}/ClientOnly.tsx +0 -0
/package/src/{components → core/components}/ErrorBoundary.tsx +0 -0
/package/src/{components → core/components}/Link.tsx +0 -0
/package/src/{components → core/components}/NotFound.tsx +0 -0
/package/src/{contexts → core/contexts}/RouterLayerContext.ts +0 -0
/package/src/{errors → core/errors}/Redirection.ts +0 -0
/package/src/{hooks → core/hooks}/useActive.ts +0 -0
/package/src/{hooks → core/hooks}/useRouter.ts +0 -0
/package/src/{index.shared.ts → core/index.shared.ts} +0 -0

package/src/head/index.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import {
+  AlephaReact,
+  type PageConfigSchema,
+  type TPropsDefault,
+  type TPropsParentDefault,
+} from "@alepha/react";
+import { $module } from "alepha";
+import { $head } from "./descriptors/$head.ts";
+import type { Head } from "./interfaces/Head.ts";
+import { ServerHeadProvider } from "./providers/ServerHeadProvider.ts";
+// ---------------------------------------------------------------------------------------------------------------------
+export * from "./descriptors/$head.ts";
+export * from "./hooks/useHead.ts";
+export * from "./interfaces/Head.ts";
+export * from "./providers/ServerHeadProvider.ts";
+// ---------------------------------------------------------------------------------------------------------------------
+declare module "@alepha/react" {
+  interface PageDescriptorOptions<
+    TConfig extends PageConfigSchema = PageConfigSchema,
+    TProps extends object = TPropsDefault,
+    TPropsParent extends object = TPropsParentDefault,
+  > {
+    head?: Head | ((props: TProps, previous?: Head) => Head);
+  }
+  interface ReactRouterState {
+    head: Head;
+  }
+}
+// ---------------------------------------------------------------------------------------------------------------------
+/**
+ * Fill `<head>` server & client side.
+ *
+ * @see {@link ServerHeadProvider}
+ * @module alepha.react.head
+ */
+export const AlephaReactHead = $module({
+  name: "alepha.react.head",
+  descriptors: [$head],
+  services: [AlephaReact, ServerHeadProvider],
+});

package/src/head/interfaces/Head.ts ADDED Viewed

@@ -0,0 +1,46 @@
+export interface Head extends SimpleHead {
+  description?: string;
+  // TODO
+  keywords?: string[];
+  author?: string;
+  robots?: string;
+  themeColor?: string;
+  viewport?:
+    | string
+    | {
+        width?: string;
+        height?: string;
+        initialScale?: string;
+        maximumScale?: string;
+        userScalable?: "no" | "yes" | "0" | "1";
+        interactiveWidget?:
+          | "resizes-visual"
+          | "resizes-content"
+          | "overlays-content";
+      };
+  og?: {
+    title?: string;
+    description?: string;
+    image?: string;
+    url?: string;
+    type?: string;
+  };
+  twitter?: {
+    card?: string;
+    title?: string;
+    description?: string;
+    image?: string;
+    site?: string;
+  };
+}
+export interface SimpleHead {
+  title?: string;
+  titleSeparator?: string;
+  htmlAttributes?: Record<string, string>;
+  bodyAttributes?: Record<string, string>;
+  meta?: Array<{ name: string; content: string }>;
+}

package/src/head/providers/BrowserHeadProvider.ts ADDED Viewed

@@ -0,0 +1,105 @@
+import { $hook, $inject } from "alepha";
+import type { Head } from "../interfaces/Head";
+import { HeadProvider } from "./HeadProvider.ts";
+export class BrowserHeadProvider {
+  protected readonly headProvider = $inject(HeadProvider);
+  protected get document(): Document {
+    return window.document;
+  }
+  protected readonly onBrowserRender = $hook({
+    on: "react:browser:render",
+    handler: async ({ state }) => {
+      this.headProvider.fillHead(state);
+      if (state.head) {
+        this.renderHead(this.document, state.head);
+      }
+    },
+  });
+  protected readonly onTransitionEnd = $hook({
+    on: "react:transition:end",
+    handler: async ({ state }) => {
+      this.headProvider.fillHead(state);
+      if (state.head) {
+        this.renderHead(this.document, state.head);
+      }
+    },
+  });
+  public getHead(document: Document): Head {
+    return {
+      get title() {
+        return document.title;
+      },
+      get htmlAttributes() {
+        const attrs: Record<string, string> = {};
+        for (const attr of document.documentElement.attributes) {
+          attrs[attr.name] = attr.value;
+        }
+        return attrs;
+      },
+      get bodyAttributes() {
+        const attrs: Record<string, string> = {};
+        for (const attr of document.body.attributes) {
+          attrs[attr.name] = attr.value;
+        }
+        return attrs;
+      },
+      get meta() {
+        const metas: { name: string; content: string }[] = [];
+        for (const meta of document.head.querySelectorAll("meta[name]")) {
+          const name = meta.getAttribute("name");
+          const content = meta.getAttribute("content");
+          if (name && content) {
+            metas.push({ name, content });
+          }
+        }
+        return metas;
+      },
+    };
+  }
+  public renderHead(document: Document, head: Head): void {
+    if (head.title) {
+      document.title = head.title;
+    }
+    if (head.bodyAttributes) {
+      for (const [key, value] of Object.entries(head.bodyAttributes)) {
+        if (value) {
+          document.body.setAttribute(key, value);
+        } else {
+          document.body.removeAttribute(key);
+        }
+      }
+    }
+    if (head.htmlAttributes) {
+      for (const [key, value] of Object.entries(head.htmlAttributes)) {
+        if (value) {
+          document.documentElement.setAttribute(key, value);
+        } else {
+          document.documentElement.removeAttribute(key);
+        }
+      }
+    }
+    if (head.meta) {
+      for (const it of head.meta) {
+        const { name, content } = it;
+        const meta = document.querySelector(`meta[name="${name}"]`);
+        if (meta) {
+          meta.setAttribute("content", content);
+        } else {
+          const newMeta = document.createElement("meta");
+          newMeta.setAttribute("name", name);
+          newMeta.setAttribute("content", content);
+          document.head.appendChild(newMeta);
+        }
+      }
+    }
+  }
+}

package/src/head/providers/HeadProvider.ts ADDED Viewed

@@ -0,0 +1,73 @@
+import type { PageRoute, ReactRouterState } from "@alepha/react";
+import type { Head } from "../interfaces/Head.ts";
+export class HeadProvider {
+  public global?: Head | (() => Head);
+  protected getGlobalHead(): Head | undefined {
+    if (typeof this.global === "function") {
+      return this.global();
+    }
+    return this.global;
+  }
+  public fillHead(state: ReactRouterState) {
+    state.head = {
+      ...state.head,
+      ...this.getGlobalHead(),
+    };
+    for (const layer of state.layers) {
+      if (layer.route?.head && !layer.error) {
+        this.fillHeadByPage(layer.route, state, layer.props ?? {});
+      }
+    }
+  }
+  protected fillHeadByPage(
+    page: PageRoute,
+    state: ReactRouterState,
+    props: Record<string, any>,
+  ): void {
+    if (!page.head) {
+      return;
+    }
+    state.head ??= {};
+    const head =
+      typeof page.head === "function"
+        ? page.head(props, state.head)
+        : page.head;
+    if (head.title) {
+      state.head ??= {};
+      if (state.head.titleSeparator) {
+        state.head.title = `${head.title}${state.head.titleSeparator}${state.head.title}`;
+      } else {
+        state.head.title = head.title;
+      }
+      state.head.titleSeparator = head.titleSeparator;
+    }
+    if (head.htmlAttributes) {
+      state.head.htmlAttributes = {
+        ...state.head.htmlAttributes,
+        ...head.htmlAttributes,
+      };
+    }
+    if (head.bodyAttributes) {
+      state.head.bodyAttributes = {
+        ...state.head.bodyAttributes,
+        ...head.bodyAttributes,
+      };
+    }
+    if (head.meta) {
+      state.head.meta = [...(state.head.meta ?? []), ...(head.meta ?? [])];
+    }
+  }
+}

package/src/head/providers/ServerHeadProvider.ts ADDED Viewed

@@ -0,0 +1,109 @@
+import { $hook, $inject } from "alepha";
+import { ServerTimingProvider } from "alepha/server";
+import type { SimpleHead } from "../interfaces/Head.ts";
+import { HeadProvider } from "./HeadProvider.ts";
+export class ServerHeadProvider {
+  protected readonly headProvider = $inject(HeadProvider);
+  protected readonly serverTimingProvider = $inject(ServerTimingProvider);
+  protected readonly onServerRenderEnd = $hook({
+    on: "react:server:render:end",
+    handler: async (ev) => {
+      this.serverTimingProvider.beginTiming("renderHead");
+      this.headProvider.fillHead(ev.state);
+      if (ev.state.head) {
+        ev.html = this.renderHead(ev.html, ev.state.head);
+      }
+      this.serverTimingProvider.endTiming("renderHead");
+    },
+  });
+  public renderHead(template: string, head: SimpleHead): string {
+    let result = template;
+    // Inject htmlAttributes
+    const htmlAttributes = head.htmlAttributes;
+    if (htmlAttributes) {
+      result = result.replace(
+        /<html([^>]*)>/i,
+        (_, existingAttrs) =>
+          `<html${this.mergeAttributes(existingAttrs, htmlAttributes)}>`,
+      );
+    }
+    // Inject bodyAttributes
+    const bodyAttributes = head.bodyAttributes;
+    if (bodyAttributes) {
+      result = result.replace(
+        /<body([^>]*)>/i,
+        (_, existingAttrs) =>
+          `<body${this.mergeAttributes(existingAttrs, bodyAttributes)}>`,
+      );
+    }
+    // Build head content
+    let headContent = "";
+    const title = head.title;
+    if (title) {
+      if (template.includes("<title>")) {
+        result = result.replace(
+          /<title>(.*?)<\/title>/i,
+          () => `<title>${this.escapeHtml(title)}</title>`,
+        );
+      } else {
+        headContent += `<title>${this.escapeHtml(title)}</title>\n`;
+      }
+    }
+    if (head.meta) {
+      for (const meta of head.meta) {
+        headContent += `<meta name="${this.escapeHtml(meta.name)}" content="${this.escapeHtml(meta.content)}">\n`;
+      }
+    }
+    // Inject into <head>...</head>
+    result = result.replace(
+      /<head([^>]*)>(.*?)<\/head>/is,
+      (_, existingAttrs, existingHead) =>
+        `<head${existingAttrs}>${existingHead}${headContent}</head>`,
+    );
+    return result.trim();
+  }
+  protected mergeAttributes(
+    existing: string,
+    attrs: Record<string, string>,
+  ): string {
+    const existingAttrs = this.parseAttributes(existing);
+    const merged = { ...existingAttrs, ...attrs };
+    return Object.entries(merged)
+      .map(([k, v]) => ` ${k}="${this.escapeHtml(v)}"`)
+      .join("");
+  }
+  protected parseAttributes(attrStr: string): Record<string, string> {
+    attrStr = attrStr.replaceAll("'", '"');
+    const attrs: Record<string, string> = {};
+    const attrRegex = /([^\s=]+)(?:="([^"]*)")?/g;
+    let match: RegExpExecArray | null = attrRegex.exec(attrStr);
+    while (match) {
+      attrs[match[1]] = match[2] ?? "";
+      match = attrRegex.exec(attrStr);
+    }
+    return attrs;
+  }
+  protected escapeHtml(str: string): string {
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+}

package/src/i18n/README.md ADDED Viewed

@@ -0,0 +1,76 @@
+# Alepha React I18n
+Internationalization (i18n) support for React applications using Alepha.
+## Installation
+This package is part of the Alepha framework and can be installed via the all-in-one package:
+```bash
+npm install alepha
+```
+## Module
+Add i18n support to your Alepha React application. SSR and CSR compatible.
+It supports lazy loading of translations and provides a context to access the current language.
+This module can be imported and used as follows:
+```typescript
+import { Alepha, run } from "alepha";
+import { AlephaReactI18n } from "@alepha/react/i18n";
+const alepha = Alepha.create()
+	.with(AlephaReactI18n);
+run(alepha);
+```
+## API Reference
+### Descriptors
+Descriptors are functions that define and configure various aspects of your application. They follow the convention of starting with ` $ ` and return configured descriptor instances.
+For more details, see the [Descriptors documentation](/docs/descriptors).
+#### $dictionary()
+Register a dictionary entry for translations.
+It allows you to define a set of translations for a specific language.
+Entry can be lazy-loaded, which is useful for large dictionaries or when translations are not needed immediately.
+```tsx
+import { $dictionary } from "@alepha/react/i18n";
+const Example = () => {
+  const { tr } = useI18n<App, "en">();
+  return <div>{tr("hello")}</div>; //
+}
+class App {
+  en = $dictionary({
+    // { default: { hello: "Hey" } }
+    lazy: () => import("./translations/en.ts"),
+  });
+  home = $page({
+    path: "/",
+    component: Example,
+  })
+}
+run(App);
+```
+### Hooks
+Hooks provide a way to tap into various lifecycle events and extend functionality. They follow the convention of starting with `use` and return configured hook instances.
+#### useI18n()
+Hook to access the i18n service.

package/src/i18n/components/Localize.tsx ADDED Viewed

@@ -0,0 +1,35 @@
+import type { TypeBoxError } from "alepha";
+import type { DateTime } from "alepha/datetime";
+import { useI18n } from "../hooks/useI18n.ts";
+export interface LocalizeProps {
+  value: string | number | Date | DateTime | TypeBoxError;
+  /**
+   * Options for number formatting (when value is a number)
+   * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+   */
+  number?: Intl.NumberFormatOptions;
+  /**
+   * Options for date formatting (when value is a Date or DateTime)
+   * Can be:
+   * - A dayjs format string (e.g., "LLL", "YYYY-MM-DD", "dddd, MMMM D YYYY")
+   * - "fromNow" for relative time (e.g., "2 hours ago")
+   * - Intl.DateTimeFormatOptions for native formatting
+   * @see https://day.js.org/docs/en/display/format
+   * @see https://day.js.org/docs/en/display/from-now
+   */
+  date?: string | "fromNow" | Intl.DateTimeFormatOptions;
+  /**
+   * Timezone to display dates in (when value is a Date or DateTime)
+   * Uses IANA timezone names (e.g., "America/New_York", "Europe/Paris", "Asia/Tokyo")
+   * @see https://day.js.org/docs/en/timezone/timezone
+   */
+  timezone?: string;
+}
+const Localize = (props: LocalizeProps) => {
+  const i18n = useI18n();
+  return i18n.l(props.value, props);
+};
+export default Localize;

package/src/i18n/descriptors/$dictionary.ts ADDED Viewed

@@ -0,0 +1,65 @@
+import { $inject, createDescriptor, Descriptor, KIND } from "alepha";
+import { I18nProvider } from "../providers/I18nProvider.ts";
+/**
+ * Register a dictionary entry for translations.
+ *
+ * It allows you to define a set of translations for a specific language.
+ * Entry can be lazy-loaded, which is useful for large dictionaries or when translations are not needed immediately.
+ *
+ * @example
+ * ```ts
+ * import { $dictionary } from "@alepha/react/i18n";
+ *
+ * const Example = () => {
+ *   const { tr } = useI18n<App, "en">();
+ *   return <div>{tr("hello")}</div>; //
+ * }
+ *
+ * class App {
+ *
+ *   en = $dictionary({
+ *     // { default: { hello: "Hey" } }
+ *     lazy: () => import("./translations/en.ts"),
+ *   });
+ *
+ *   home = $page({
+ *     path: "/",
+ *     component: Example,
+ *   })
+ * }
+ *
+ * run(App);
+ * ```
+ */
+export const $dictionary = <T extends Record<string, string>>(
+  options: DictionaryDescriptorOptions<T>,
+): DictionaryDescriptor<T> => {
+  return createDescriptor(DictionaryDescriptor<T>, options);
+};
+// ---------------------------------------------------------------------------------------------------------------------
+export interface DictionaryDescriptorOptions<T extends Record<string, string>> {
+  lang?: string;
+  name?: string;
+  lazy: () => Promise<{ default: T }>;
+}
+// ---------------------------------------------------------------------------------------------------------------------
+export class DictionaryDescriptor<
+  T extends Record<string, string>,
+> extends Descriptor<DictionaryDescriptorOptions<T>> {
+  protected provider = $inject(I18nProvider);
+  protected onInit() {
+    this.provider.registry.push({
+      name: this.options.name ?? this.config.propertyKey,
+      lang: this.options.lang ?? this.config.propertyKey,
+      loader: () => this.options.lazy().then((it) => it.default),
+      translations: {},
+    });
+  }
+}
+$dictionary[KIND] = DictionaryDescriptor;

package/src/i18n/hooks/useI18n.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { useInject, useStore } from "@alepha/react";
+import type { DictionaryDescriptor } from "../descriptors/$dictionary.ts";
+import { I18nProvider } from "../providers/I18nProvider.ts";
+/**
+ * Hook to access the i18n service.
+ */
+export const useI18n = <
+  S extends object,
+  K extends keyof ServiceDictionary<S>,
+>(): I18nProvider<S, K> => {
+  useStore("alepha.react.i18n.lang");
+  return useInject(I18nProvider<S, K>);
+};
+export type ServiceDictionary<T extends object> = {
+  [K in keyof T]: T[K] extends DictionaryDescriptor<infer U> ? U : never;
+};

package/src/i18n/index.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import { $module } from "alepha";
+import { $dictionary } from "./descriptors/$dictionary.ts";
+import { I18nProvider } from "./providers/I18nProvider.ts";
+// ---------------------------------------------------------------------------------------------------------------------
+export type { LocalizeProps } from "./components/Localize.tsx";
+export { default as Localize } from "./components/Localize.tsx";
+export * from "./descriptors/$dictionary.ts";
+export * from "./hooks/useI18n.ts";
+export * from "./providers/I18nProvider.ts";
+// ---------------------------------------------------------------------------------------------------------------------
+declare module "alepha" {
+  export interface State {
+    "alepha.react.i18n.lang"?: string;
+  }
+}
+// ---------------------------------------------------------------------------------------------------------------------
+/**
+ * Add i18n support to your Alepha React application. SSR and CSR compatible.
+ *
+ * It supports lazy loading of translations and provides a context to access the current language.
+ *
+ * @module alepha.react.i18n
+ */
+export const AlephaReactI18n = $module({
+  name: "alepha.react.i18n",
+  descriptors: [$dictionary],
+  services: [I18nProvider],
+});