alepha 0.9.2 → 0.9.4

package/react/form.d.ts

@@ -1,41 +1,49 @@
 import * as _alepha_core0 from "alepha";
-import { Static, TObject, TSchema } from "alepha";
-import { InputHTMLAttributes } from "react";
+import { Alepha, Static, TObject, TSchema } from "alepha";
+import { InputHTMLAttributes, ReactNode } from "react";
+import * as _alepha_logger0 from "alepha/logger";
 
-//#region src/hooks/useForm.d.ts
-
-/**
- * Custom hook to create a form with validation and field management.
- * This hook uses TypeBox schemas to define the structure and validation rules for the form.
- * It provides a way to handle form submission, field creation, and value management.
- *
- * @example
- * ```tsx
- * import { t } from "alepha";
- *
- * const form = useForm({
- *   schema: t.object({
- *     username: t.string(),
- *     password: t.string(),
- *   }),
- *   handler: (values) => {
- *     console.log("Form submitted with values:", values);
- *   },
- * });
- *
- * return (
- *   <form onSubmit={form.onSubmit}>
- *     <input {...form.input("username")} />
- *     <input {...form.input("password")} />
- *     <button type="submit">Submit</button>
- *   </form>
- * );
- * ```
- */
-declare const useForm: <T extends TObject>(options: UseFormOptions<T>) => UseFormReturn<T>;
-declare const getValueFromInput: (input: FormDataEntryValue, schema: TSchema) => any;
-declare const valueToInputEntry: (value: any) => string | number;
-type UseFormOptions<T extends TObject> = {
+//#region src/services/FormModel.d.ts
+declare class FormModel<T extends TObject> {
+  readonly id: string;
+  protected readonly options: FormCtrlOptions<T>;
+  protected readonly log: _alepha_logger0.Logger;
+  protected readonly alepha: Alepha;
+  protected readonly values: Record<string, any>;
+  input: SchemaToInput<T>;
+  constructor(id: string, options: FormCtrlOptions<T>);
+  readonly onSubmit: (event: FormEventLike) => Promise<void>;
+  protected parseValuesFromFormElement<T extends TObject>(options: FormCtrlOptions<T>, store: Record<string, any>): Record<string, any>;
+  protected getValueFromInputObject<T extends TObject>(options: FormCtrlOptions<T>, values: Record<string, any>, key: string, value: FormDataEntryValue): void;
+  protected createProxyFromSchema<T extends TObject>(options: FormCtrlOptions<T>, schema: TSchema, context: {
+    parent: string;
+    store: Record<string, any>;
+  }): SchemaToInput<T>;
+  protected createInputFromSchema<T extends TObject>(name: keyof Static<T> & string, options: FormCtrlOptions<T>, schema: TSchema, context: {
+    parent: string;
+    store: Record<string, any>;
+  }): InputField;
+  protected getValueFromInput(input: FormDataEntryValue, schema: TSchema): any;
+  protected valueToInputEntry(value: any): string | number | boolean;
+}
+type SchemaToInput<T extends TObject> = { [K in keyof T["properties"]]: T["properties"][K] extends TObject ? SchemaToInput<T["properties"][K]> : InputField };
+interface FormEventLike {
+  currentTarget: HTMLFormElement;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+}
+interface InputField {
+  path: string;
+  props: InputHTMLAttributesLike;
+  schema: TSchema;
+  set: (value: any) => void;
+}
+type InputHTMLAttributesLike = Pick<InputHTMLAttributes<unknown>, "id" | "name" | "type" | "value" | "defaultValue" | "required" | "maxLength" | "minLength" | "aria-label"> & {
+  value?: any;
+  defaultValue?: any;
+  onChange?: (event: any) => void;
+};
+type FormCtrlOptions<T extends TObject> = {
   /**
    * The schema defining the structure and validation rules for the form.
    * This should be a TypeBox schema object.
@@ -47,12 +55,7 @@ type UseFormOptions<T extends TObject> = {
    */
   handler: (values: Static<T>, args: {
     form: HTMLFormElement;
-  }) => void;
-  /**
-   * Optional callback to handle changes in form values.
-   * This can be used to update state or perform side effects when values change.
-   */
-  onValuesChange?: (values: Static<T>, previous: Static<T>) => void;
+  }) => unknown;
   /**
    * Optional initial values for the form fields.
    * This can be used to pre-populate the form with existing data.
@@ -71,33 +74,82 @@ type UseFormOptions<T extends TObject> = {
    * If omitted, IDs will not be generated.
    */
   id?: string;
+  onError?: (error: Error, args: {
+    form: HTMLFormElement;
+  }) => void;
+  onChange?: (key: string, value: any, store: Record<string, any>) => void;
 };
-type UseFormReturn<T extends TObject> = {
-  /**
-   * Function to handle form submission.
-   * This should be attached to the form's onSubmit event.
-   *
-   * @example
-   * ```tsx
-   * const form = useForm();
-   *
-   * return <form onSubmit={form.onSubmit}></form>;
-   * ```
-   */
-  onSubmit?: (event: FormEventLike) => void;
-  /**
-   * Creates an input field for the specified schema property.
-   */
-  input: SchemaToInput<T>;
-};
-type SchemaToInput<T extends TObject> = { [K in keyof T["properties"]]: T["properties"][K] extends TObject ? SchemaToInput<T["properties"][K]> : InputHTMLAttributes<unknown> };
-interface FormEventLike {
-  currentTarget: HTMLFormElement;
-  preventDefault: () => void;
+//#endregion
+//#region src/components/FormState.d.ts
+declare const FormState: <T extends TObject>(props: {
+  form: FormModel<T>;
+  children: (state: {
+    loading: boolean;
+    dirty: boolean;
+  }) => ReactNode;
+}) => ReactNode;
+//#endregion
+//#region src/hooks/useForm.d.ts
+/**
+ * Custom hook to create a form with validation and field management.
+ * This hook uses TypeBox schemas to define the structure and validation rules for the form.
+ * It provides a way to handle form submission, field creation, and value management.
+ *
+ * @example
+ * ```tsx
+ * import { t } from "alepha";
+ *
+ * const form = useForm({
+ *   schema: t.object({
+ *     username: t.string(),
+ *     password: t.string(),
+ *   }),
+ *   handler: (values) => {
+ *     console.log("Form submitted with values:", values);
+ *   },
+ * });
+ *
+ * return (
+ *   <form onSubmit={form.onSubmit}>
+ *     <input {...form.input("username")} />
+ *     <input {...form.input("password")} />
+ *     <button type="submit">Submit</button>
+ *   </form>
+ * );
+ * ```
+ */
+declare const useForm: <T extends TObject>(options: FormCtrlOptions<T>) => FormModel<T>;
+//#endregion
+//#region src/hooks/useFormState.d.ts
+interface UseFormStateReturn<T extends TObject> {
+  loading: boolean;
+  dirty: boolean;
+  values?: T;
+  error?: Error;
 }
-//# sourceMappingURL=useForm.d.ts.map
+declare const useFormState: <T extends TObject>(form: FormModel<T>) => UseFormStateReturn<T>;
 //#endregion
 //#region src/index.d.ts
+declare module "alepha" {
+  interface Hooks {
+    "form:change": {
+      id: string;
+    };
+    "form:submit:begin": {
+      id: string;
+    };
+    "form:submit:success": {
+      id: string;
+    };
+    "form:submit:error": {
+      id: string;
+      error: Error;
+    };
+    "form:submit:end": {
+      id: string;
+    };
+  }
+}
 /**
  * React hooks for managing forms in Alepha applications.
  *
@@ -109,9 +161,7 @@ interface FormEventLike {
  * @see {@link useForm}
  * @module alepha.react.form
  */
-declare const AlephaReactForm: _alepha_core0.ModuleDescriptor;
-//# sourceMappingURL=index.d.ts.map
-
+declare const AlephaReactForm: _alepha_core0.Service<_alepha_core0.Module>;
 //#endregion
-export { AlephaReactForm, FormEventLike, SchemaToInput, UseFormOptions, UseFormReturn, getValueFromInput, useForm, valueToInputEntry };
+export { AlephaReactForm, FormCtrlOptions, FormEventLike, FormModel, FormState, InputField, InputHTMLAttributesLike, SchemaToInput, UseFormStateReturn, useForm, useFormState };
 //# sourceMappingURL=index.d.ts.map

package/react/head.d.ts

@@ -1,6 +1,7 @@
-import * as _alepha_core0$1 from "alepha";
-import * as _alepha_core0 from "alepha";
-import { PageConfigSchema, PageReactContext, PageRoute, RouterState, TPropsDefault, TPropsParentDefault } from "alepha/react";
+import * as _alepha_core1 from "alepha";
+import { Descriptor, KIND } from "alepha";
+import { PageConfigSchema, PageRoute, ReactRouterState, TPropsDefault, TPropsParentDefault } from "alepha/react";
+import { ServerTimingProvider } from "alepha/server";
 
 //#region src/interfaces/Head.d.ts
 interface Head extends SimpleHead {
@@ -42,36 +43,68 @@ interface SimpleHead {
     content: string;
   }>;
 }
-//# sourceMappingURL=Head.d.ts.map
-//#endregion
-//#region src/hooks/useHead.d.ts
-declare const useHead: (head?: Head | ((previous?: Head) => Head)) => void;
-//# sourceMappingURL=useHead.d.ts.map
 //#endregion
 //#region src/providers/HeadProvider.d.ts
 declare class HeadProvider {
-  fillHead(state: RouterState, context: PageReactContext): void;
-  protected fillHeadByPage(page: PageRoute, context: PageReactContext, props: Record<string, any>): void;
+  global?: Head | (() => Head);
+  protected getGlobalHead(): Head | undefined;
+  fillHead(state: ReactRouterState): void;
+  protected fillHeadByPage(page: PageRoute, state: ReactRouterState, props: Record<string, any>): void;
+}
+//#endregion
+//#region src/descriptors/$head.d.ts
+/**
+ * Set global `<head>` options for the application.
+ */
+declare const $head: {
+  (options: HeadDescriptorOptions): HeadDescriptor;
+  [KIND]: typeof HeadDescriptor;
+};
+type HeadDescriptorOptions = Head | (() => Head);
+declare class HeadDescriptor extends Descriptor<HeadDescriptorOptions> {
+  protected readonly provider: HeadProvider;
+  protected onInit(): void;
 }
-//# sourceMappingURL=HeadProvider.d.ts.map
+//#endregion
+//#region src/hooks/useHead.d.ts
+/**
+ * ```tsx
+ * const App = () => {
+ *   const [head, setHead] = useHead({
+ *     // will set the document title on the first render
+ *     title: "My App",
+ *   });
+ *
+ *   return (
+ *     // This will update the document title when the button is clicked
+ *     <button onClick={() => setHead({ title: "Change Title" })}>
+ *       Change Title {head.title}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+declare const useHead: (options?: UseHeadOptions) => void;
+type UseHeadOptions = Head | ((previous?: Head) => Head);
+type UseHeadReturn = [Head, (head?: Head | ((previous?: Head) => Head)) => void];
 //#endregion
 //#region src/providers/ServerHeadProvider.d.ts
 declare class ServerHeadProvider {
   protected readonly headProvider: HeadProvider;
-  protected readonly onServerRenderEnd: _alepha_core0$1.HookDescriptor<"react:server:render:end">;
+  protected readonly serverTimingProvider: ServerTimingProvider;
+  protected readonly onServerRenderEnd: _alepha_core1.HookDescriptor<"react:server:render:end">;
   renderHead(template: string, head: SimpleHead): string;
   protected mergeAttributes(existing: string, attrs: Record<string, string>): string;
   protected parseAttributes(attrStr: string): Record<string, string>;
   protected escapeHtml(str: string): string;
 }
-//# sourceMappingURL=ServerHeadProvider.d.ts.map
 //#endregion
 //#region src/index.d.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 PageReactContext {
+  interface ReactRouterState {
     head: Head;
   }
 }
@@ -81,9 +114,7 @@ declare module "alepha/react" {
  * @see {@link ServerHeadProvider}
  * @module alepha.react.head
  */
-declare const AlephaReactHead: _alepha_core0.ModuleDescriptor;
-//# sourceMappingURL=index.d.ts.map
-
+declare const AlephaReactHead: _alepha_core1.Service<_alepha_core1.Module>;
 //#endregion
-export { AlephaReactHead, Head, ServerHeadProvider, SimpleHead, useHead };
+export { $head, AlephaReactHead, Head, HeadDescriptor, HeadDescriptorOptions, ServerHeadProvider, SimpleHead, UseHeadOptions, UseHeadReturn, useHead };
 //# sourceMappingURL=index.d.ts.map

package/react/i18n.d.ts

@@ -1,12 +1,22 @@
-import * as _alepha_core0$1 from "alepha";
-import * as _alepha_core0 from "alepha";
+import * as _alepha_core1 from "alepha";
 import { Alepha, Descriptor, KIND } from "alepha";
+import * as _alepha_logger0 from "alepha/logger";
+import * as _alepha_server_cookies0 from "alepha/server/cookies";
+import * as _sinclair_typebox0 from "@sinclair/typebox";
 
+//#region src/hooks/useI18n.d.ts
+/**
+ * Hook to access the i18n service.
+ */
+declare const useI18n: <S extends object, K extends keyof ServiceDictionary<S>>() => I18nProvider<object, never>;
+type ServiceDictionary<T extends object> = { [K in keyof T]: T[K] extends DictionaryDescriptor<infer U> ? U : never };
+//#endregion
 //#region src/providers/I18nProvider.d.ts
-declare class I18nProvider {
-  logger: _alepha_core0$1.Logger;
-  alepha: Alepha;
-  registry: Array<{
+declare class I18nProvider<S extends object, K extends keyof ServiceDictionary<S>> {
+  protected logger: _alepha_logger0.Logger;
+  protected alepha: Alepha;
+  protected cookie: _alepha_server_cookies0.AbstractCookieDescriptor<_sinclair_typebox0.TString>;
+  readonly registry: Array<{
     name: string;
     lang: string;
     loader: () => Promise<Record<string, string>>;
@@ -15,15 +25,53 @@ declare class I18nProvider {
   options: {
     fallbackLang: string;
   };
-  onRender: _alepha_core0$1.HookDescriptor<"server:onRequest">;
-  onStart: _alepha_core0$1.HookDescriptor<"start">;
+  numberFormat: {
+    format: (value: number) => string;
+  };
+  get languages(): string[];
+  protected readonly onRender: _alepha_core1.HookDescriptor<"server:onRequest">;
+  protected readonly onStart: _alepha_core1.HookDescriptor<"start">;
+  protected createFormatters(): void;
   setLang(lang: string): Promise<void>;
+  protected readonly mutate: _alepha_core1.HookDescriptor<"state:mutate">;
   get lang(): string;
-  translate: (key: string) => string;
+  translate: (key: string, args?: string[]) => string;
+  readonly tr: (key: keyof ServiceDictionary<S>[K] | string, args?: string[]) => string;
+  protected render(item: string, args: string[]): string;
 }
-//# sourceMappingURL=I18nProvider.d.ts.map
 //#endregion
 //#region src/descriptors/$dictionary.d.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);
+ * ```
+ */
 declare const $dictionary: {
   <T extends Record<string, string>>(options: DictionaryDescriptorOptions<T>): DictionaryDescriptor<T>;
   [KIND]: typeof DictionaryDescriptor;
@@ -36,21 +84,9 @@ interface DictionaryDescriptorOptions<T extends Record<string, string>> {
   }>;
 }
 declare class DictionaryDescriptor<T extends Record<string, string>> extends Descriptor<DictionaryDescriptorOptions<T>> {
-  protected provider: I18nProvider;
+  protected provider: I18nProvider<object, never>;
   protected onInit(): void;
 }
-//# sourceMappingURL=$dictionary.d.ts.map
-//#endregion
-//#region src/hooks/useI18n.d.ts
-/**
- * Hook to access the i18n service.
- */
-declare const useI18n: <S extends object, K extends keyof ServiceDictionary<S>>() => {
-  lang: string;
-  setLang: (lang: string) => Promise<void>;
-  tr: (key: keyof ServiceDictionary<S>[K]) => string;
-};
-type ServiceDictionary<T extends object> = { [K in keyof T]: T[K] extends DictionaryDescriptor<infer U> ? U : never };
 //#endregion
 //#region src/index.d.ts
 declare module "alepha" {
@@ -65,9 +101,7 @@ declare module "alepha" {
  *
  * @module alepha.react.i18n
  */
-declare const AlephaReactI18n: _alepha_core0.ModuleDescriptor;
-//# sourceMappingURL=index.d.ts.map
-
+declare const AlephaReactI18n: _alepha_core1.Service<_alepha_core1.Module>;
 //#endregion
-export { $dictionary, AlephaReactI18n, DictionaryDescriptor, DictionaryDescriptorOptions, I18nProvider, useI18n };
+export { $dictionary, AlephaReactI18n, DictionaryDescriptor, DictionaryDescriptorOptions, I18nProvider, ServiceDictionary, useI18n };
 //# sourceMappingURL=index.d.ts.map