npm - @alepha/react - Versions diffs - 0.13.6 → 0.13.8 - Mend

@alepha/react 0.13.6 → 0.13.8

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 (37) hide show

package/dist/auth/index.browser.js +5 -5
package/dist/auth/index.browser.js.map +1 -1
package/dist/auth/index.d.ts +105 -103
package/dist/auth/index.js +5 -5
package/dist/auth/index.js.map +1 -1
package/dist/core/index.browser.js +407 -142
package/dist/core/index.browser.js.map +1 -1
package/dist/core/index.d.ts +144 -116
package/dist/core/index.js +409 -145
package/dist/core/index.js.map +1 -1
package/dist/core/index.native.js +24 -2
package/dist/core/index.native.js.map +1 -1
package/dist/form/index.d.ts +14 -6
package/dist/form/index.js +32 -12
package/dist/form/index.js.map +1 -1
package/dist/head/index.d.ts +18 -18
package/dist/head/index.js +5 -1
package/dist/head/index.js.map +1 -1
package/dist/i18n/index.d.ts +25 -25
package/dist/i18n/index.js +4 -3
package/dist/i18n/index.js.map +1 -1
package/dist/websocket/index.d.ts +1 -1
package/package.json +22 -23
package/src/auth/hooks/useAuth.ts +1 -0
package/src/auth/services/ReactAuth.ts +6 -4
package/src/core/components/ErrorViewer.tsx +378 -130
package/src/core/components/NestedView.tsx +16 -11
package/src/core/contexts/AlephaProvider.tsx +41 -0
package/src/core/contexts/RouterLayerContext.ts +2 -0
package/src/core/hooks/useAction.ts +4 -1
package/src/core/index.shared.ts +1 -0
package/src/core/primitives/$page.ts +15 -2
package/src/core/providers/ReactPageProvider.ts +6 -7
package/src/core/providers/ReactServerProvider.ts +2 -6
package/src/form/services/FormModel.ts +81 -26
package/src/head/index.ts +2 -1
package/src/i18n/providers/I18nProvider.ts +4 -2

package/src/core/primitives/$page.ts CHANGED Viewed

@@ -150,10 +150,10 @@ export interface PagePrimitiveOptions<
    * Load data before rendering the page.
    *
    * This function receives
-   * - the request context and
+   * - the request context (params, query, etc.)
    * - the parent props (if page has a parent)
    *
-   * In SSR, the returned data will be serialized and sent to the client, then reused during the client-side hydration.
+   * > In SSR, the returned data will be serialized and sent to the client, then reused during the client-side hydration.
    *
    * Resolve can be stopped by throwing an error, which will be handled by the `errorHandler` function.
    * It's common to throw a `NotFoundError` to display a 404 page.
@@ -162,6 +162,13 @@ export interface PagePrimitiveOptions<
    */
   resolve?: (context: PageResolve<TConfig, TPropsParent>) => Async<TProps>;
+  /**
+   * Default props to pass to the component when rendering the page.
+   *
+   * Resolved props from the `resolve` function will override these default props.
+   */
+  props?: () => Partial<TProps>;
   /**
    * The component to render when the page is loaded.
    *
@@ -189,6 +196,12 @@ export interface PagePrimitiveOptions<
    */
   parent?: PagePrimitive<PageConfigSchema, TPropsParent, any>;
+  /**
+   * Function to determine if the page can be accessed.
+   *
+   * If it returns false, the page will not be accessible and a 403 Forbidden error will be returned.
+   * This function can be used to implement permission-based access control.
+   */
   can?: () => boolean;
   /**

package/src/core/providers/ReactPageProvider.ts CHANGED Viewed

@@ -314,7 +314,11 @@ export class ReactPageProvider {
       if (!it.error) {
         try {
           const element = await this.createElement(it.route, {
+            // default props attached to page
+            ...(it.route.props ? it.route.props() : {}),
+            // resolved props
             ...props,
+            // context props (from previous layers)
             ...context,
           });
@@ -380,12 +384,6 @@ export class ReactPageProvider {
     return { state };
   }
-  protected createRedirectionLayer(redirect: string): CreateLayersResult {
-    return {
-      redirect,
-    };
-  }
   protected getErrorHandler(route: PageRoute): ErrorHandler | undefined {
     if (route.errorHandler) return route.errorHandler;
     let parent = route.parent;
@@ -431,7 +429,7 @@ export class ReactPageProvider {
   ): string {
     const found = this.pages.find((it) => it.name === page.options.name);
     if (!found) {
-      throw new Error(`Page ${page.options.name} not found`);
+      throw new AlephaError(`Page ${page.options.name} not found`);
     }
     let url = found.path ?? "";
@@ -475,6 +473,7 @@ export class ReactPageProvider {
         value: {
           index,
           path,
+          onError: this.getErrorHandler(page) ?? ((error) => this.renderError(error)),
         },
       },
       element,

package/src/core/providers/ReactServerProvider.ts CHANGED Viewed

@@ -39,17 +39,13 @@ import {
 const envSchema = t.object({
   REACT_SSR_ENABLED: t.optional(t.boolean()),
   REACT_ROOT_ID: t.text({ default: "root" }), // TODO: move to ReactPageProvider.options?
-  REACT_SERVER_TEMPLATE: t.optional(
-    t.text({
-      size: "rich",
-    }),
-  ),
 });
 declare module "alepha" {
   interface Env extends Partial<Static<typeof envSchema>> {}
   interface State {
     "alepha.react.server.ssr"?: boolean;
+    "alepha.react.server.template"?: string;
   }
 }
@@ -171,7 +167,7 @@ export class ReactServerProvider {
   public get template() {
     return (
-      this.alepha.env.REACT_SERVER_TEMPLATE ??
+      this.alepha.store.get("alepha.react.server.template") ??
       "<!DOCTYPE html><html lang='en'><head></head><body></body></html>"
     );
   }

package/src/form/services/FormModel.ts CHANGED Viewed

@@ -1,11 +1,5 @@
-import {
-  $inject,
-  Alepha,
-  type Static,
-  type TObject,
-  type TSchema,
-  t,
-} from "alepha";
+import type { TArray } from "alepha";
+import { $inject, Alepha, type Static, t, type TObject, type TSchema, } from "alepha";
 import { $logger } from "alepha/logger";
 import type { ChangeEvent, InputHTMLAttributes } from "react";
@@ -221,17 +215,21 @@ export class FormModel<T extends TObject> {
         if (!options.schema || !t.schema.isObject(schema)) {
           return {};
         }
         if (prop in schema.properties) {
-          if (t.schema.isObject(schema.properties[prop])) {
-            return this.createProxyFromSchema(
-              options,
-              schema.properties[prop],
-              {
-                parent: parent ? `${parent}.${prop}` : prop,
-                store: context.store,
-              },
-            );
-          }
+          // // it's a nested object, create another proxy
+          // if (t.schema.isObject(schema.properties[prop])) {
+          //   return this.createProxyFromSchema(
+          //     options,
+          //     schema.properties[prop],
+          //     {
+          //       parent: parent ? `${parent}.${prop}` : prop,
+          //       store: context.store,
+          //     },
+          //   );
+          // }
           return this.createInputFromSchema<T>(
             prop as keyof Static<T> & string,
             options,
@@ -253,7 +251,7 @@ export class FormModel<T extends TObject> {
       parent: string;
       store: Record<string, any>;
     },
-  ): InputField {
+  ): BaseInputField {
     const parent = context.parent || "";
     const field = schema.properties?.[name];
     if (!field) {
@@ -268,7 +266,6 @@ export class FormModel<T extends TObject> {
     }
     const isRequired = schema.required?.includes(name) ?? false;
     const key = parent ? `${parent}.${name}` : name;
     const path = `/${key.replaceAll(".", "/")}`;
@@ -278,7 +275,7 @@ export class FormModel<T extends TObject> {
       if (context.store[key] === typedValue) {
         // no change, do not update
-        // return;
+        // return; <- disabled for now, as some inputs may need to sync even if value is same
       }
       context.store[key] = typedValue;
@@ -291,6 +288,8 @@ export class FormModel<T extends TObject> {
         id: this.id,
         path: path,
         value: typedValue,
+      }, {
+        catch: true
       });
       if (sync) {
@@ -299,6 +298,7 @@ export class FormModel<T extends TObject> {
         );
         if (inputElement instanceof HTMLInputElement) {
           if (t.schema.isBoolean(field)) {
+            inputElement.value = value;
             inputElement.checked = Boolean(value);
           } else {
             inputElement.value = value;
@@ -324,7 +324,15 @@ export class FormModel<T extends TObject> {
         }
         if (t.schema.isBoolean(field)) {
-          set(event.target.checked, false);
+          if (event.target.value === "true") {
+            set(true, false);
+          } else if (event.target.value === "false") {
+            set(false, false);
+          } else if (event.target.value === "") {
+            set(undefined, false);
+          } else {
+            set(event.target.checked, false);
+          }
         } else {
           set(event.target.value, false);
         }
@@ -391,6 +399,39 @@ export class FormModel<T extends TObject> {
       Object.assign(attr, customAttr);
     }
+    // if type = object, add items: { [key: string]: InputField }
+    if (t.schema.isObject(field)) {
+      return {
+        path,
+        props: attr,
+        schema: field,
+        set,
+        form: this,
+        required,
+        items: this.createProxyFromSchema(
+          options,
+          field,
+          {
+            parent: key,
+            store: context.store,
+          },
+        )
+      } as ObjectInputField<any>;
+    }
+    // if type = array, add items: InputField[]
+    if (t.schema.isArray(field)) {
+      return {
+        path,
+        props: attr,
+        schema: field,
+        set,
+        form: this,
+        required,
+        items: [], // <- will be populated dynamically in the UI
+      } as ArrayInputField<any>;
+    }
     return {
       path,
       props: attr,
@@ -466,9 +507,7 @@ export class FormModel<T extends TObject> {
 }
 export type SchemaToInput<T extends TObject> = {
-  [K in keyof T["properties"]]: T["properties"][K] extends TObject
-    ? SchemaToInput<T["properties"][K]>
-    : InputField;
+  [K in keyof T["properties"]]: InputField<T["properties"][K]>;
 };
 export interface FormEventLike {
@@ -476,13 +515,29 @@ export interface FormEventLike {
   stopPropagation?: () => void;
 }
-export interface InputField {
+export type InputField<T extends TSchema> =
+  T extends TObject
+    ? ObjectInputField<T>
+    : T extends TArray<infer U>
+      ? ArrayInputField<U>
+      : BaseInputField;
+export interface BaseInputField {
   path: string;
   required: boolean;
   props: InputHTMLAttributesLike;
   schema: TSchema;
   set: (value: any) => void;
   form: FormModel<any>;
+  items?: any;
+}
+export interface ObjectInputField<T extends TObject> extends BaseInputField {
+  items: SchemaToInput<T>;
+}
+export interface ArrayInputField<T extends TSchema> extends BaseInputField {
+  items: Array<InputField<T>>
 }
 export type InputHTMLAttributesLike = Pick<

package/src/head/index.ts CHANGED Viewed

@@ -8,6 +8,7 @@ import { $module } from "alepha";
 import { $head } from "./primitives/$head.ts";
 import type { Head } from "./interfaces/Head.ts";
 import { ServerHeadProvider } from "./providers/ServerHeadProvider.ts";
+import { HeadProvider } from "./providers/HeadProvider.ts";
 // ---------------------------------------------------------------------------------------------------------------------
@@ -43,5 +44,5 @@ declare module "@alepha/react" {
 export const AlephaReactHead = $module({
   name: "alepha.react.head",
   primitives: [$head],
-  services: [AlephaReact, ServerHeadProvider],
+  services: [AlephaReact, ServerHeadProvider, HeadProvider],
 });

package/src/i18n/providers/I18nProvider.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export class I18nProvider<
   protected cookie = $cookie({
     name: "lang",
     schema: t.text(),
+    ttl: [1, "year"]
   });
   public readonly registry: Array<{
@@ -170,7 +171,7 @@ export class I18nProvider<
     options: I18nLocalizeOptions = {},
   ) => {
     // Handle numbers
-    if (typeof value === "number") {
+    if (typeof value === "number" && !options.date) {
       return new Intl.NumberFormat(this.lang, options.number).format(value);
     }
@@ -178,7 +179,8 @@ export class I18nProvider<
     if (
       value instanceof Date ||
       this.dateTimeProvider.isDateTime(value) ||
-      (typeof value === "string" && options.date)
+      (typeof value === "string" && options.date) ||
+      (typeof value === "number" && options.date)
     ) {
       // convert to DateTime with locale applied
       let dt = this.dateTimeProvider.of(value);