@figliolia/galena 1.0.0

package/src/Galena/types.ts

@@ -0,0 +1,13 @@
+import type { State } from "./State";
+
+export type MutationEvent<T extends any> = {
+  [key: State<T>["name"]]: State<T>;
+};
+
+export enum Priority {
+  "IMMEDIATE" = 1,
+  "MICROTASK" = 2,
+  "BATCHED" = 3,
+}
+
+export type Task = () => void;

package/src/Middleware/Middleware.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from "@figliolia/event-emitter";
+
+import type { State } from "Galena/State";
+import type { MiddlewareEvent } from "Middleware/types";
+import { MiddlewareEvents } from "Middleware/types";
+
+/**
+ * # Middleware
+ *
+ * A root interface for all `Galena` Middleware. When creating
+ * a middleware for your `Galena` state, simply extend this
+ * class any override any of its public lifecycle methods.
+ *
+ * ### Creating a Profiling Middleware
+ *
+ * ```typescript
+ * export class ProfilerMiddleware extends Middleware {
+ *   updateState: number | null = null;
+ *
+ *   override onBeforeUpdate(state: State) {
+ *     this.updateStart = performance.now();
+ *   }
+ *
+ *   override onUpdate(state: State) {
+ *     if(this.updateStart) {
+ *       const timeToUpdate = performance.now() - this.updateStart;
+ *       if(timeToUpdate > 16) {
+ *         console.warn("A state transition took more than 16 milliseconds!", State);
+ *       }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export class Middleware<T extends any = any> {
+  public static Emitter = new EventEmitter<MiddlewareEvent<any>>();
+  constructor() {
+    const extension = Object.getPrototypeOf(this);
+    const methods = Object.getOwnPropertyNames(extension);
+    methods.forEach((event) => {
+      if (Middleware.validateEvent(event)) {
+        Middleware.Emitter.on(MiddlewareEvents[event], this[event]);
+      }
+    });
+  }
+
+  /**
+   * Validate Event
+   *
+   * Asserts that a given method on an extending class prototype
+   * is one of the supported `Galena` lifecycle events
+   */
+  private static validateEvent(event: string): event is MiddlewareEvents {
+    return event in MiddlewareEvents;
+  }
+
+  /* Life Cycle Events */
+
+  /**
+   * On Before Update
+   *
+   * An event emitted each time a `State` mutation is enqueued
+   */
+  public onBeforeUpdate(state: State<T>) {}
+
+  /**
+   * On Update
+   *
+   * An event emitted each time a `State` instance is mutated
+   */
+  public onUpdate(state: State<T>) {}
+}

package/src/Middleware/index.ts

@@ -0,0 +1,2 @@
+export { Middleware } from "./Middleware";
+export * from "./types";

package/src/Middleware/types.ts

@@ -0,0 +1,11 @@
+import type { State } from "Galena/State";
+
+export enum MiddlewareEvents {
+  "onUpdate" = "onUpdate",
+  "onBeforeUpdate" = "onBeforeUpdate",
+}
+
+export type MiddlewareEvent<T extends any = any> = Record<
+  MiddlewareEvents,
+  State<T>
+>;

package/src/Middlewares/Logger.ts

@@ -0,0 +1,62 @@
+import { State } from "Galena/State";
+import { Middleware } from "Middleware/Middleware";
+
+/**
+ * Logger
+ *
+ * A middleware for Redux-style logging! Each state transition
+ * will log to the console the `State` instance that changed
+ * along with a before and after snapshot of the current state:
+ *
+ * ```typescript
+ * const State = new Galena([new Logger()]);
+ * // if using isolated state instances:
+ * const MyState = new State(...args);
+ * MyState.registerMiddleware(new Logger())
+ * ```
+ */
+export class Logger extends Middleware {
+  private previousState: Record<string, any> | null = null;
+
+  override onBeforeUpdate(state: State) {
+    this.previousState = State.clone(state.state);
+  }
+
+  override onUpdate(state: State) {
+    console.log(
+      "%cMutation:",
+      "color: rgb(187, 186, 186); font-weight: bold",
+      state.name,
+      "@",
+      this.time
+    );
+    console.log(
+      "   %cPrevious State",
+      "color: #26ad65; font-weight: bold",
+      this.previousState
+    );
+    console.log(
+      "   %cNext State    ",
+      "color: rgb(17, 118, 249); font-weight: bold",
+      state.getState()
+    );
+    this.previousState = null;
+  }
+
+  /**
+   * Time
+   *
+   * Returns the time in which a given state transition completed
+   */
+  private get time() {
+    const date = new Date();
+    const mHours = date.getHours();
+    const hours = mHours > 12 ? mHours - 12 : mHours;
+    const mins = date.getMinutes();
+    const minutes = mins.toString().length === 1 ? `0${mins}` : mins;
+    const secs = date.getSeconds();
+    const seconds = secs.toString().length === 1 ? `0${secs}` : secs;
+    const milliseconds = date.getMilliseconds();
+    return `${hours}:${minutes}:${seconds}:${milliseconds}`;
+  }
+}

package/src/Middlewares/Profiler.ts

@@ -0,0 +1,38 @@
+import type { State } from "Galena/State";
+import { Middleware } from "Middleware/Middleware";
+
+/**
+ * Profiler
+ *
+ * A logger for state transitions exceeding a given threshold
+ * for duration:
+ *
+ * ```typescript
+ * const State = new Galena([new Profiler()]);
+ * // if using isolated state instances:
+ * const MyState = new State(...args);
+ * MyState.registerMiddleware(new Profiler())
+ * ```
+ */
+export class Profiler extends Middleware {
+  private threshold: number;
+  private startTime: number | null = null;
+  constructor(threshold = 16) {
+    super();
+    this.threshold = threshold;
+  }
+  onBeforeUpdate(_: State) {
+    this.startTime = performance.now();
+  }
+
+  onUpdate(nextState: State) {
+    if (this.startTime) {
+      const endTime = performance.now();
+      const diff = endTime - this.startTime;
+      if (diff > this.threshold) {
+        console.warn("Slow state transition detected", nextState);
+        console.warn(`The last transition took ${diff}ms`);
+      }
+    }
+  }
+}

package/src/Middlewares/index.ts

@@ -0,0 +1,2 @@
+export { Logger } from "./Logger";
+export { Profiler } from "./Profiler";

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "Galena";
+export * from "Middleware";
+export * from "Middlewares";