@figliolia/galena 2.2.2 → 2.2.4

package/README.md

@@ -107,7 +107,7 @@ const subscription = FeatureState.subscribe((state) => {
 
 FeatureState.update((state) => {
   // Update feature state!
-  state.list.push(state.list.length);
+  state.list = [...state.list, state.list.length];
 });
 
 // Clean up subscriptions
@@ -393,7 +393,7 @@ In the example below, we'll create a unit of state holding unique identifiers fo
 
 ```typescript
 export const CurrentUserState = AppState.composeState("currentUser", { 
-  userID: 1, 
+  userID: "1", 
   username: "currentUser", 
   connectedUsers: ["2", "3", "4", "5"]
 });
@@ -470,9 +470,17 @@ export class UserModel extends State<{
   username: string;
   connectedUsers: string[];
 }> {
+  constructor() {
+    super("User State", {
+      userID: "",
+      username: "",
+      connectedUsers: []
+    })
+  }
+
   public addConnection(userID: string) {
     this.update(state => {
-      state.connectedUsers.push(userID);
+      state.connectedUsers = [...state.connectedUsers, userID];
     });
   }
 
@@ -537,7 +545,7 @@ Using 2 identical applications, I've profiled the performance of Galena vs. Redu
 As the application scales with more state updates and connected components, the spread between `Galena` and Redux grows even further. Although I don't believe most applications will ever require 10,000 immediate state updates (unless building a game-like experience), `Galena` does relieve the bottle-necks of popular state management utilities quite well.
 
 ### Support for Frontend Frameworks!
-`Galena` provides bindings for React through [react-galena](https://github.com/alexfigliolia/react-galena). This package provides factories for generating HOC's and hooks from your Galena instances and units of State!
+`Galena` provides bindings for React through [react-galena](https://www.npmjs.com/package/@figliolia/react-galena). This package provides factories for generating HOC's and hooks from your Galena instances and units of State!
 
 #### Demo Application
 To see some basic usage using Galena with React, please check out this [Example App](https://github.com/alexfigliolia/galena-quick-start)

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/mjs/Galena/Galena.js

@@ -0,0 +1,225 @@
+import { AutoIncrementingID } from "@figliolia/event-emitter";
+import { State } from "./State.js";
+import { Guards } from "./Guards.js";
+/**
+ * ## Galena
+ *
+ * A performant global state solution that scales
+ *
+ * ### Creating State
+ *
+ * ```typescript
+ * // AppState.ts
+ * import { Galena } from "@figliolia/galena";
+ *
+ * const AppState = new Galena([...middleware]);
+ *
+ * const NavigationState = AppState.composeState("navigation", {
+ *   currentRoute: "/",
+ *   userID: "12345",
+ *   permittedRoutes: ["/*"]
+ * });
+ * ```
+ *
+ * ### Subscribing to State Changes
+ * #### Using the Galena Instance
+ * ```typescript
+ * import { AppState } from "./AppState";
+ *
+ * AppState.subscribe(appState => {
+ *   const navState = appState.get("navigation");
+ *   const { currentRoute } = navState.state;
+ *   // do something with state changes!
+ * });
+ * ```
+ * #### Using the State Instance
+ * ```typescript
+ * NavigationState.subscribe(navigation => {
+ *   const { currentRoute } = navigation
+ *   // do something with state changes!
+ * });
+ * ```
+ *
+ * #### Using Global Subscriptions
+ * ```typescript
+ * NavigationState.subscribeAll(nextState => {
+ *   const { currentRoute } = nextState.navigation
+ *   // do something with state changes!
+ * });
+ * ```
+ *
+ * ### Mutating State
+ * ```typescript
+ * NavigationState.update(state => {
+ *   state.currentRoute = "/profile";
+ *   // You can mutate state without creating new objects!
+ * });
+ * ```
+ */
+export class Galena extends Guards {
+    state = {};
+    subscriptions = new Map();
+    middleware = [];
+    IDs = new AutoIncrementingID();
+    constructor(middleware = []) {
+        super();
+        this.middleware = middleware;
+    }
+    /**
+     * Compose State
+     *
+     * Creates a new `State` instance and returns it. Your new state
+     * becomes immediately available on your `Galena` instance and
+     * is wired into your middleware. All existing subscriptions to
+     * state will automatically receive updates when your new unit of
+     * state updates
+     */
+    composeState(name, initialState, Model = (State)) {
+        this.guardDuplicateStates(name, this.state);
+        const state = new Model(name, initialState);
+        state.registerMiddleware(...this.middleware);
+        this.mutable[name] = state;
+        this.reIndexSubscriptions(name);
+        return state;
+    }
+    /**
+     * Get State
+     *
+     * Returns a mutable state instance
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Get
+     *
+     * Returns a unit of `State` by name
+     */
+    get(name) {
+        this.warnForUndefinedStates(name, this.state);
+        return this.state[name];
+    }
+    /**
+     * Mutable
+     *
+     * Returns a mutable state instance
+     */
+    get mutable() {
+        return this.state;
+    }
+    /**
+     * Update
+     *
+     * Runs a mutation on the specified unit of state
+     */
+    update(name, mutation) {
+        return this.get(name).update(mutation);
+    }
+    /**
+     * Background Update
+     *
+     * Runs a higher priority mutation on the specified unit of
+     * state
+     */
+    backgroundUpdate(name, mutation) {
+        return this.get(name).backgroundUpdate(mutation);
+    }
+    /**
+     * Priority Update
+     *
+     * Runs an immediate priority mutation on the specified unit
+     * of state
+     */
+    priorityUpdate(name, mutation) {
+        return this.get(name).priorityUpdate(mutation);
+    }
+    /**
+     * Subscribe
+     *
+     * Given the name of a unit of state, this method registers
+     * a subscription on the target state instance. The callback
+     * you provide will execute each time state changes. Returns
+     * a unique identifier for your subscription. To clean up your
+     * subscription, call `Galena.unsubscribe()` with the ID returned
+     * by this method
+     */
+    subscribe(name, callback) {
+        return this.get(name).subscribe(callback);
+    }
+    /**
+     * Unsubscribe
+     *
+     * Given a subscription ID returned from the `subscribe` method,
+     * this method removes and cleans up the corresponding subscription
+     */
+    unsubscribe(name, ID) {
+        return this.get(name).unsubscribe(ID);
+    }
+    /**
+     * Subscribe All
+     *
+     * Registers a callback on each registered `State` instance and
+     * is invoked each time your state changes. Using `Galena`'s
+     * `subscribeAll` method, although performant, can be less
+     * performant than subscribing directly to a target `State`
+     * instance using `Galena.subscribe()`. To clean up your
+     * subscription, call `Galena.unsubscribeAll()` with the ID
+     * returned
+     */
+    subscribeAll(callback) {
+        const stateSubscriptions = [];
+        for (const key in this.state) {
+            stateSubscriptions.push([
+                key,
+                this.state[key].subscribe(() => {
+                    callback(this.state);
+                }),
+            ]);
+        }
+        const subscriptionID = this.IDs.get();
+        this.subscriptions.set(subscriptionID, stateSubscriptions);
+        return subscriptionID;
+    }
+    /**
+     * Unsubscribe
+     *
+     * Given a subscription ID returned from the `subscribeAll()` method,
+     * this method removes and cleans up the corresponding subscription
+     */
+    unsubscribeAll(ID) {
+        const IDs = this.subscriptions.get(ID);
+        if (IDs) {
+            for (const [state, ID] of IDs) {
+                this.state[state].unsubscribe(ID);
+                this.subscriptions.delete(ID);
+            }
+        }
+    }
+    /**
+     * ReIndex Subscriptions
+     *
+     * When units of state are created lazily, this method updates
+     * each existing subscription to receive mutations occurring on
+     * recently created `State` instances that post-date prior
+     * subscriptions
+     */
+    reIndexSubscriptions(name) {
+        for (const [ID, unitSubscriptions] of this.subscriptions) {
+            for (const [state, subscriptionID] of unitSubscriptions) {
+                const callback = this.state[state]["emitter"]
+                    .get(state)
+                    ?.get(subscriptionID);
+                if (callback) {
+                    unitSubscriptions.push([
+                        name,
+                        this.state[name].subscribe(() => {
+                            void callback(this.state);
+                        }),
+                    ]);
+                    this.subscriptions.set(ID, unitSubscriptions);
+                    break;
+                }
+            }
+        }
+    }
+}

package/dist/mjs/Galena/Guards.js

@@ -0,0 +1,36 @@
+/**
+ * Guards
+ *
+ * Development-only warnings and runtime errors designed to
+ * guard developers against possible pitfalls when using
+ * Galena. This interface provides composable error and
+ * warning methods that can be used to prevent invalid usage
+ * of the library
+ */
+export class Guards {
+    /**
+     * Warn For Undefined States
+     *
+     * In Galena, it's normal to lazy initialize a unit of state
+     * in attached to a `Galena` instance. This warning lets
+     * developers know that they are attempting to manipulate a
+     * unit of state that has not yet been initialized
+     */
+    warnForUndefinedStates(name, state) {
+        if (!(name in state)) {
+            console.warn(`A unit of state with the name "${name}" does not yet exist on this Galena instance. If this is expected, you can ignore this warning`);
+        }
+    }
+    /**
+     * Guard Duplicate States
+     *
+     * Throws an error if a developer attempts to create
+     * more than one state with the same name on a single
+     * `Galena` instance
+     */
+    guardDuplicateStates(name, state) {
+        if (name in state) {
+            console.warn(`A unit of state with the name "${name}" already exists on this Galena instance. Please re-name this new unit of state to something unique`);
+        }
+    }
+}

package/dist/mjs/Galena/Scheduler.js

@@ -0,0 +1,79 @@
+import { Priority } from "./types.js";
+/**
+ * Scheduler
+ *
+ * Scheduling dispatched events to state consumers is how Galena
+ * out-performs just about every state management library out there.
+ * The scheduler offers the ability to dispatch state updates on 3
+ * priorities:
+ *
+ * 1. Immediate - Immediate synchronous task execution and propagation of
+ * changes to consumers
+ * 2. Microtask - Immediate task execution and scheduled propagation of
+ * changes to consumers
+ * 3. Batched - Immediate task execution and batched propagation of
+ * changes to consumers
+ *
+ * This module manages the propagation of changes to State consumers
+ * by implementing the three priorities outlined above
+ */
+export class Scheduler {
+    task = null;
+    schedule = null;
+    constructor() {
+        this.executeTasks = this.executeTasks.bind(this);
+    }
+    /**
+     * Schedule Task
+     *
+     * Given a task (the emission of state changes to consumers)
+     * and a priority, this method executes the task on the priority
+     * level specified
+     */
+    scheduleTask(task, priority) {
+        this.task = task;
+        switch (priority) {
+            case Priority.IMMEDIATE:
+                return this.executeTasks();
+            case Priority.MICROTASK:
+                return Promise.resolve().then(() => {
+                    return this.executeTasks();
+                });
+            case Priority.BATCHED:
+            default:
+                if (!this.schedule) {
+                    this.createSchedule();
+                }
+        }
+    }
+    /**
+     * Create Schedule
+     *
+     * Schedules the execution of the current task after 5 milliseconds
+     */
+    createSchedule() {
+        this.clearSchedule();
+        this.schedule = setTimeout(this.executeTasks, 5);
+    }
+    /**
+     * Clear Schedule
+     *
+     * Clears the schedule if it exists
+     */
+    clearSchedule() {
+        if (this.schedule !== null) {
+            clearTimeout(this.schedule);
+            this.schedule = null;
+        }
+    }
+    /**
+     * Execute Tasks
+     *
+     * Clears the schedule if it exists and executes the current task
+     */
+    executeTasks() {
+        this.clearSchedule();
+        this.task?.();
+        this.task = null;
+    }
+}

package/dist/mjs/Galena/State.js

@@ -0,0 +1,285 @@
+import { MiddlewareEvents } from "../Middleware/types.js";
+import { EventEmitter } from "@figliolia/event-emitter";
+import { Priority } from "./types.js";
+import { Scheduler } from "./Scheduler.js";
+/**
+ * ### State
+ *
+ * The root of all reactivity in Galena. State instances can
+ * operate in isolation by calling `new State(...args)` or as
+ * part of your application's larger global state by using
+ * `new Galena().composeState()`.
+ *
+ * `State` instances operate on the premise of pub-sub and mutability.
+ * This provides significant performance improvement over more traditional
+ * state management tools because
+ *
+ * 1. Mutations can occur in O(1) space
+ * 2. Mutations can be batched when dispatching updates to subscribers
+ *
+ * When deciding how many `State` instances are required for your
+ * applications needs, we suggest creating and organizing state in
+ * accordance with your application logic. Meaning, you might have a
+ * `State` instance for navigation/routing, another `State` instance
+ * for storing user information, and so on. Performance can improve
+ * significantly when state is dispersed amongst multiple instances
+ *
+ * #### Creating State Instances
+ *
+ * ```typescript
+ * const MyState = new State("MyState", {
+ *   someData: true,
+ *   listItems: [1, 2, 3, 4];
+ *   // ...etc
+ * });
+ * ```
+ *
+ * #### Updating State
+ * ##### Synchronous updates
+ * ```typescript
+ * MyState.update((state) => {
+ *   state.listItems.push(5);
+ * });
+ * ```
+ * ##### Asynchronous updates
+ * ```typescript
+ * MyState.update(async (state) => {
+ *   const listItems = await fetch("/list-items");
+ *   state.listItems = listItems;
+ * });
+ * ```
+ *
+ * #### Subscribing to State Changes
+ * ```typescript
+ * MyState.subscribe((state) => {
+ *   const { listItems } = state
+ *   // Do something with your list items!
+ * });
+ * ```
+ */
+export class State extends Scheduler {
+    state;
+    name;
+    initialState;
+    middleware = [];
+    emitter = new EventEmitter();
+    constructor(name, initialState) {
+        super();
+        this.name = name;
+        this.state = initialState;
+        this.initialState = State.clone(initialState);
+    }
+    /**
+     * Get State
+     *
+     * Returns a readonly snapshot of the current state
+     */
+    getState() {
+        return this.state;
+    }
+    /**
+     * Update
+     *
+     * Mutates state and notifies any open subscriptions. This method
+     * by default uses task batching for optimized performance. In almost
+     * every use-case, this method is the correct way to mutate state. If
+     * you need to bypass batching for higher-priority state updates, you
+     * can use `State.priorityUpdate()` or `State.backgroundUpdate()`
+     *
+     * ##### Synchronous updates
+     * ```typescript
+     * MyState.update((state, initialState) => {
+     *   state.listItems.push(5);
+     * });
+     * ```
+     * ##### Asynchronous updates
+     * ```typescript
+     * MyState.update(async (state, initialState) => {
+     *   const listItems = await fetch("/list-items");
+     *   state.listItems = listItems;
+     * });
+     * ```
+     */
+    update = this.mutation((func) => {
+        return func(this.state, this.initialState);
+    }, Priority.BATCHED);
+    /**
+     * Background Update
+     *
+     * Mutates state and notifies any open subscriptions. This method
+     * bypasses Galena's internal task batching for a more immediate
+     * state update and propagation of state to consumers. It utilizes
+     * a micro-task that allows for the current call stack to clear
+     * ahead of propagating state updates to consumers
+     *
+     * ##### Synchronous updates
+     * ```typescript
+     * MyState.backgroundUpdate((state, initialState) => {
+     *   state.listItems.push(5);
+     * });
+     * ```
+     * ##### Asynchronous updates
+     * ```typescript
+     * MyState.backgroundUpdate(async (state, initialState) => {
+     *   const listItems = await fetch("/list-items");
+     *   state.listItems = listItems;
+     * });
+     * ```
+     */
+    backgroundUpdate = this.mutation((func) => {
+        return func(this.state, this.initialState);
+    }, Priority.MICROTASK);
+    /**
+     * Priority Update
+     *
+     * Mutates state and notifies any open subscriptions. This method
+     * bypasses optimizations for task batching and scheduling. This means
+     * that state updates made with this method propagate to subscriptions
+     * as immediately as possible. Overusing this method can cause your
+     * state updates to perform slower in certain cases. The usage of this
+     * method should be conserved for state mutations that need to occur
+     * at a certain frame rate
+     *
+     * ##### Synchronous updates
+     * ```typescript
+     * MyState.priorityUpdate((state, initialState) => {
+     *   state.listItems.push(5);
+     * });
+     * ```
+     * ##### Asynchronous updates
+     * ```typescript
+     * MyState.priorityUpdate(async (state, initialState) => {
+     *   const listItems = await fetch("/list-items");
+     *   state.listItems = listItems;
+     * });
+     * ```
+     */
+    priorityUpdate = this.mutation((func) => {
+        return func(this.state, this.initialState);
+    }, Priority.IMMEDIATE);
+    /**
+     * Reset
+     *
+     * Resets the current state to its initial state
+     */
+    reset = this.mutation(() => {
+        this.state = State.clone(this.initialState);
+    });
+    /**
+     * Mutation
+     *
+     * This method can be used to wrap arbitrary functions that when invoked
+     * will:
+     * 1. Notify your subscriptions with the latest state
+     * 2. Execute any registered middleware (such as loggers or profiling tools)
+     *
+     * Using this method, developers can compose and extend `Galena`'s internal
+     * infrastructure for state mutations to create proprietary models for your
+     * state
+     *
+     * ```typescript
+     * import { State } from "@figliolia/galena";
+     *
+     * // Extend of Galena State
+     * class MyState extends State {
+     *   addListItem = mutation((newListItem) => {
+     *     this.state.list.push(newListItem);
+     *   });
+     * }
+     *
+     * // Create an instance
+     * const myState = new MyState("myState", { list: [] });
+     *
+     * // Invoke your custom mutation method
+     * myState.addListItem("new-item");
+     * ```
+     */
+    mutation(func, priority = Priority.BATCHED) {
+        return (...args) => {
+            this.lifeCycleEvent(MiddlewareEvents.onBeforeUpdate);
+            const returnValue = func(...args);
+            if (returnValue instanceof Promise) {
+                return returnValue.then((v) => {
+                    this.scheduleUpdate(priority);
+                    return v;
+                });
+            }
+            this.scheduleUpdate(priority);
+            return returnValue;
+        };
+    }
+    /**
+     * Schedule Update
+     *
+     * Schedules an update to State subscribers and emits the
+     * `onUpdate` lifecycle hook
+     */
+    scheduleUpdate(priority) {
+        this.lifeCycleEvent(MiddlewareEvents.onUpdate);
+        void this.scheduleTask(() => this.emitter.emit(this.name, this.state), priority);
+    }
+    /**
+     * Register Middleware
+     *
+     * Caches a `Middleware` instance and invokes its
+     * lifecycle subscriptions on all state transitions
+     */
+    registerMiddleware(...middleware) {
+        this.middleware.push(...middleware);
+    }
+    /**
+     * Subscribe
+     *
+     * Registers a subscription on the state instance. The
+     * callback you provide will execute each time state changes.
+     * Returns a unique identifier for your subscription
+     */
+    subscribe(callback) {
+        return this.emitter.on(this.name, callback);
+    }
+    /**
+     * Unsubscribe
+     *
+     * Given a subscription ID, removes a registered subscription
+     * from the `State` instance
+     */
+    unsubscribe(ID) {
+        return this.emitter.off(this.name, ID);
+    }
+    /**
+     * Life Cycle Event
+     *
+     * Triggers a life cycle event for each registered middleware
+     */
+    lifeCycleEvent(event) {
+        const maxIndex = this.middleware.length - 1;
+        for (let i = maxIndex; i > -1; i--) {
+            this.middleware[i][event](this);
+        }
+    }
+    /**
+     * Clone
+     *
+     * `State` instances accept any value as a form of reactive
+     * state. In order to maintain the initial state past any state
+     * transitions, this method clones the initial values provided
+     * to the `State` constructor and caches them to allow for
+     * developers to easily reset their current state back to its
+     * initial value
+     */
+    static clone(state) {
+        if (Array.isArray(state)) {
+            return [...state];
+        }
+        if (state instanceof Set) {
+            return new Set(state);
+        }
+        if (state instanceof Map) {
+            return new Map(state);
+        }
+        if (state && typeof state === "object") {
+            return { ...state };
+        }
+        return state;
+    }
+}

package/dist/mjs/Galena/index.js

@@ -0,0 +1,3 @@
+export { Galena } from "./Galena.js";
+export { State } from "./State.js";
+export * from "./types.js";

package/dist/mjs/Galena/types.js

@@ -0,0 +1,6 @@
+export var Priority;
+(function (Priority) {
+    Priority[Priority["IMMEDIATE"] = 1] = "IMMEDIATE";
+    Priority[Priority["MICROTASK"] = 2] = "MICROTASK";
+    Priority[Priority["BATCHED"] = 3] = "BATCHED";
+})(Priority || (Priority = {}));

package/dist/mjs/Middleware/Middleware.js

@@ -0,0 +1,42 @@
+/**
+ * # 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 {
+    /**
+     * On Before Update
+     *
+     * An event emitted each time a `State` mutation is enqueued
+     */
+    onBeforeUpdate(state) { }
+    /**
+     * On Update
+     *
+     * An event emitted each time a `State` instance is mutated
+     */
+    onUpdate(state) { }
+}

package/dist/mjs/Middleware/index.js

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

package/dist/mjs/Middleware/types.js

@@ -0,0 +1,5 @@
+export var MiddlewareEvents;
+(function (MiddlewareEvents) {
+    MiddlewareEvents["onUpdate"] = "onUpdate";
+    MiddlewareEvents["onBeforeUpdate"] = "onBeforeUpdate";
+})(MiddlewareEvents || (MiddlewareEvents = {}));

package/dist/mjs/Middlewares/Logger.js

@@ -0,0 +1,44 @@
+import { State } from "../Galena/State.js";
+import { Middleware } from "../Middleware/Middleware.js";
+/**
+ * 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 {
+    previousState = null;
+    onBeforeUpdate(state) {
+        this.previousState = State.clone(state.state);
+    }
+    onUpdate(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
+     */
+    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/dist/mjs/Middlewares/Profiler.js

@@ -0,0 +1,35 @@
+import { Middleware } from "../Middleware/Middleware.js";
+/**
+ * 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 {
+    threshold;
+    startTime = null;
+    constructor(threshold = 16) {
+        super();
+        this.threshold = threshold;
+    }
+    onBeforeUpdate(_) {
+        this.startTime = performance.now();
+    }
+    onUpdate(nextState) {
+        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/dist/mjs/Middlewares/index.js

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

package/dist/mjs/index.js

@@ -0,0 +1,3 @@
+export * from "./Galena/index.js";
+export * from "./Middleware/index.js";
+export * from "./Middlewares/index.js";

package/dist/mjs/package.json

@@ -0,0 +1,4 @@
+{
+  "type": "module",
+  "exports": "./index.js"
+}

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@figliolia/galena",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "A performant state management library supporting mutable state, batched updates, middleware and a rich development API",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/mjs/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/mjs/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
   "files": [
     "dist",
     "src/*"
@@ -30,13 +38,14 @@
   "scripts": {
     "test": "jest",
     "coverage": "jest --env=jsdom --coverage --testResultsProcessor ./node_modules/jest-junit",
-    "build": "rm -rf dist && tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
+    "build": "npx ts-packager -e src",
     "lint": "tsc --noemit && eslint ./ --fix"
   },
   "dependencies": {
     "@figliolia/event-emitter": "^1.0.8"
   },
   "devDependencies": {
+    "@figliolia/ts-packager": "^1.0.3",
     "@types/node": "^16.7.13",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",