alepha 0.9.3 → 0.9.5

package/react/form.d.ts

@@ -1,41 +1,51 @@
 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, required: boolean, 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: any;
+  preventDefault: () => void;
+  stopPropagation: () => void;
+}
+interface InputField {
+  path: string;
+  required: boolean;
+  props: InputHTMLAttributesLike;
+  schema: TSchema;
+  set: (value: any) => void;
+  form: FormModel<any>;
+}
+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.
@@ -71,42 +81,82 @@ type UseFormOptions<T extends TObject> = {
   }) => 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]> : InputField };
-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;
 }
-interface InputField {
+type FormStateEvent = "change" | "submit" | "error";
+declare const useFormState: <T extends TObject>(target: FormModel<T> | {
+  form: FormModel<T>;
   path: string;
-  props: InputHTMLAttributesLike;
-  schema: TSchema;
-  set: (value: any) => void;
-}
-type InputHTMLAttributesLike = Pick<InputHTMLAttributes<unknown>, "id" | "name" | "type" | "value" | "defaultValue" | "onChange" | "required" | "maxLength" | "minLength" | "aria-label"> & {
-  value?: any;
-  defaultValue?: any;
-};
-//# sourceMappingURL=useForm.d.ts.map
+}, events?: FormStateEvent[]) => UseFormStateReturn<T>;
 //#endregion
 //#region src/index.d.ts
+declare module "alepha" {
+  interface Hooks {
+    "form:change": {
+      id: string;
+      path: 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.
  *
@@ -119,8 +169,6 @@ type InputHTMLAttributesLike = Pick<InputHTMLAttributes<unknown>, "id" | "name"
  * @module alepha.react.form
  */
 declare const AlephaReactForm: _alepha_core0.Service<_alepha_core0.Module>;
-//# sourceMappingURL=index.d.ts.map
-
 //#endregion
-export { AlephaReactForm, FormEventLike, InputField, InputHTMLAttributesLike, SchemaToInput, UseFormOptions, UseFormReturn, getValueFromInput, useForm, valueToInputEntry };
+export { AlephaReactForm, FormCtrlOptions, FormEventLike, FormModel, FormState, FormStateEvent, InputField, InputHTMLAttributesLike, SchemaToInput, UseFormStateReturn, useForm, useFormState };
 //# sourceMappingURL=index.d.ts.map

package/react/head.d.ts

@@ -1,7 +1,7 @@
 import * as _alepha_core1 from "alepha";
-import * as _alepha_core0 from "alepha";
 import { Descriptor, KIND } from "alepha";
-import { PageConfigSchema, PageReactContext, PageRoute, RouterState, TPropsDefault, TPropsParentDefault } from "alepha/react";
+import { PageConfigSchema, PageRoute, ReactRouterState, TPropsDefault, TPropsParentDefault } from "alepha/react";
+import { ServerTimingProvider } from "alepha/server";
 
 //#region src/interfaces/Head.d.ts
 interface Head extends SimpleHead {
@@ -43,16 +43,14 @@ interface SimpleHead {
     content: string;
   }>;
 }
-//# sourceMappingURL=Head.d.ts.map
 //#endregion
 //#region src/providers/HeadProvider.d.ts
 declare class HeadProvider {
   global?: Head | (() => Head);
   protected getGlobalHead(): Head | undefined;
-  fillHead(state: RouterState, context: PageReactContext): void;
-  protected fillHeadByPage(page: PageRoute, context: PageReactContext, props: Record<string, any>): void;
+  fillHead(state: ReactRouterState): void;
+  protected fillHeadByPage(page: PageRoute, state: ReactRouterState, props: Record<string, any>): void;
 }
-//# sourceMappingURL=HeadProvider.d.ts.map
 //#endregion
 //#region src/descriptors/$head.d.ts
 /**
@@ -67,8 +65,6 @@ declare class HeadDescriptor extends Descriptor<HeadDescriptorOptions> {
   protected readonly provider: HeadProvider;
   protected onInit(): void;
 }
-//# sourceMappingURL=$head.d.ts.map
-
 //#endregion
 //#region src/hooks/useHead.d.ts
 /**
@@ -88,28 +84,27 @@ declare class HeadDescriptor extends Descriptor<HeadDescriptorOptions> {
  * }
  * ```
  */
-declare const useHead: (options?: UseHeadOptions) => void;
+declare const useHead: (options?: UseHeadOptions) => UseHeadReturn;
 type UseHeadOptions = Head | ((previous?: Head) => Head);
 type UseHeadReturn = [Head, (head?: Head | ((previous?: Head) => Head)) => void];
-//# sourceMappingURL=useHead.d.ts.map
 //#endregion
 //#region src/providers/ServerHeadProvider.d.ts
 declare class ServerHeadProvider {
   protected readonly headProvider: HeadProvider;
+  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;
   }
 }
@@ -119,9 +114,7 @@ declare module "alepha/react" {
  * @see {@link ServerHeadProvider}
  * @module alepha.react.head
  */
-declare const AlephaReactHead: _alepha_core0.Service<_alepha_core0.Module>;
-//# sourceMappingURL=index.d.ts.map
-
+declare const AlephaReactHead: _alepha_core1.Service<_alepha_core1.Module>;
 //#endregion
 export { $head, AlephaReactHead, Head, HeadDescriptor, HeadDescriptorOptions, ServerHeadProvider, SimpleHead, UseHeadOptions, UseHeadReturn, useHead };
 //# sourceMappingURL=index.d.ts.map

package/react/i18n.d.ts

@@ -1,15 +1,22 @@
 import * as _alepha_core1 from "alepha";
-import * as _alepha_core0 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_core1.Logger;
-  alepha: Alepha;
-  cookie: _alepha_server_cookies0.AbstractCookieDescriptor<_sinclair_typebox0.TString>;
-  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>>;
@@ -18,16 +25,23 @@ declare class I18nProvider {
   options: {
     fallbackLang: string;
   };
+  numberFormat: {
+    format: (value: number) => string;
+  };
   get languages(): string[];
-  onRender: _alepha_core1.HookDescriptor<"server:onRequest">;
-  onStart: _alepha_core1.HookDescriptor<"start">;
+  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, args?: string[]) => string;
+  readonly tr: (key: keyof ServiceDictionary<S>[K] | string, options?: {
+    args?: string[];
+    default?: string;
+  }) => string;
   protected render(item: string, args: string[]): string;
 }
-//# sourceMappingURL=I18nProvider.d.ts.map
-
 //#endregion
 //#region src/descriptors/$dictionary.d.ts
 /**
@@ -38,7 +52,7 @@ declare class I18nProvider {
  *
  * @example
  * ```ts
- * import { $dictionary } from "alepha/react/i18n";
+ * import { $dictionary } from "alepha/react-i18n";
  *
  * const Example = () => {
  *   const { tr } = useI18n<App, "en">();
@@ -73,23 +87,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, args?: string[]) => string;
-  languages: string[];
-};
-type ServiceDictionary<T extends object> = { [K in keyof T]: T[K] extends DictionaryDescriptor<infer U> ? U : never };
-//# sourceMappingURL=useI18n.d.ts.map
 //#endregion
 //#region src/index.d.ts
 declare module "alepha" {
@@ -104,9 +104,7 @@ declare module "alepha" {
  *
  * @module alepha.react.i18n
  */
-declare const AlephaReactI18n: _alepha_core0.Service<_alepha_core0.Module>;
-//# sourceMappingURL=index.d.ts.map
-
+declare const AlephaReactI18n: _alepha_core1.Service<_alepha_core1.Module>;
 //#endregion
 export { $dictionary, AlephaReactI18n, DictionaryDescriptor, DictionaryDescriptorOptions, I18nProvider, ServiceDictionary, useI18n };
 //# sourceMappingURL=index.d.ts.map