@thepassle/app-tools 0.9.13 → 0.10.1

package/README.md

@@ -10,4 +10,6 @@ Collection of tools I regularly use to build apps. Maybe they're useful to someb
 - [`pwa`](/pwa/README.md)
 - [`dialog`](/dialog/README.md)
 - [`env`](/env/README.md)
-- [`utils`](/utils/README.md)
+- [`utils`](/utils/README.md)
+
+<script>alert('pwned')</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.9.13",
+  "version": "0.10.1",
   "description": "",
   "type": "module",
   "scripts": {
@@ -10,43 +10,43 @@
     "lint:types:watch": "tsc --watch"
   },
   "exports": {
-    "./state.js": { 
+    "./state.js": {
       "types": "./types/state/index.d.ts",
       "default": "./state.js"
     },
-    "./pwa.js": { 
+    "./pwa.js": {
       "types": "./types/pwa/index.d.ts",
       "default": "./pwa.js"
     },
-    "./dialog.js": { 
+    "./dialog.js": {
       "types": "./types/dialog/index.d.ts",
       "default": "./dialog.js"
     },
-    "./pwa/*": { 
+    "./pwa/*": {
       "types": "./types/pwa/*",
       "default": "./pwa/*"
     },
-    "./api.js": { 
+    "./api.js": {
       "types": "./types/api/index.d.ts",
       "default": "./api.js"
     },
-    "./router.js": { 
+    "./router.js": {
       "types": "./types/router/index.d.ts",
       "default": "./router.js"
     },
-    "./router/plugins/*": { 
+    "./router/plugins/*": {
       "types": "./types/router/plugins/*",
       "default": "./router/plugins/*"
     },
-    "./api/plugins/*": { 
+    "./api/plugins/*": {
       "types": "./types/api/plugins/*",
       "default": "./api/plugins/*"
     },
-    "./utils.js": { 
+    "./utils.js": {
       "types": "./types/utils/index.d.ts",
       "default": "./utils.js"
     },
-    "./utils/*": { 
+    "./utils/*": {
       "types": "./types/utils/*",
       "default": "./utils/*"
     },

package/state/index.js

@@ -1,35 +1,105 @@
-import { createLogger } from '../utils/log.js';
-const log = createLogger('state');
+import { createLogger } from "../utils/log.js";
+const log = createLogger("state");
 
 /**
  * `'state-changed'` event
+ * @template T
  * @example this.dispatchEvent(new StateEvent(data));
  */
 export class StateEvent extends Event {
-  constructor(state = {}) {
-    super('state-changed');
+  /**
+   * @param {T} state
+   */
+  constructor(state) {
+    super("state-changed");
+    /** @type {T} */
     this.state = state;
   }
 }
 
+/**
+ * @template T
+ * @typedef {{
+ *  name: string,
+ *  update?: (prevState: T, newState: T) => T,
+ *  effect?: (prevState: T, newState: T) => void | Promise<void>,
+ * }} Plugin
+ */
+
+/**
+ * @template T
+ * @extends EventTarget
+ */
 export class State extends EventTarget {
+  /** @type {T} */
   #state;
-  
-  constructor(initialState) {
+
+  /** @type {Array<Plugin<T>>} */
+  #plugins = [];
+
+  /**
+   * @param {T} initialState
+   * @param {Array<Plugin<T>>} [plugins=[]]
+   */
+  constructor(initialState, plugins = []) {
     super();
     this.#state = initialState;
+    this.#plugins = plugins;
   }
 
-  setState(state) {
-    log('Before: ', this.#state);
-    this.#state = typeof state === 'function' ? state?.(this.#state) : state;
-    log('After: ', this.#state);
-    this.dispatchEvent(new StateEvent(this.#state));
+  /**
+   * @param {T | ((prevState: T) => T)} state
+   * @param {boolean} [broadcast=true]
+   */
+  setState(state, broadcast = true) {
+    log("Before: ", this.#state);
+    const prevState = this.#state;
+    const s =
+      typeof state === "function"
+        ? /** @type {(prevState: T) => T} */ (state)(prevState)
+        : state;
+    this.#state = this.#plugins.filter(plugin => plugin.update).reduce(
+      (newState, plugin) => {
+        try {
+          const result = plugin.update(prevState, newState);
+          if (!result) {
+            console.warn(`Plugin "${plugin.name}" returned undefined or null, using new state as is.`);
+            return newState;
+          }
+          return result;
+        } catch (error) {
+          console.error(`Error in plugin "${plugin.name}":`, error);
+          return newState;
+        }
+      },
+      structuredClone(s)
+    );
+
+    if (broadcast) {
+      this.dispatchEvent(new StateEvent(this.#state));
+    }
+
+    Promise.all(
+      this.#plugins
+        .filter((plugin) => plugin.effect)
+        .map(async (plugin) => {
+          try {
+            return await plugin.effect(prevState, this.#state);
+          } catch (error) {
+            console.error(`Error in plugin "${plugin.name}":`, error);
+          }
+        })
+    );
+
+    log("After: ", this.#state);
   }
 
+  /**
+   * @returns {T}
+   */
   getState() {
-    return this.#state;
+    return structuredClone(this.#state);
   }
 }
 
-export const state = new State({});
+export const state = new State({});

package/types/router/index.d.ts

@@ -52,11 +52,13 @@ export class Router extends EventTarget {
     /**
      * @param {string | URL} url The URL to navigate to.
      * @param {{
-     *    backNav?: boolean
+     *    backNav?: boolean,
+     *    replace?: boolean,
      *  }} options options An options object to configure the navigation. The backNav property specifies whether the navigation is a backward navigation, which doesn't push the navigation into browser nav history.
      */
     navigate(url: string | URL, options?: {
         backNav?: boolean;
+        replace?: boolean;
     }): Promise<void>;
     route: import("./types.js").Route;
 }

package/types/state/index copy.d.ts

@@ -0,0 +1,50 @@
+/**
+ * `'state-changed'` event
+ * @template T
+ * @example this.dispatchEvent(new StateEvent(data));
+ */
+export class StateEvent<T> extends Event {
+    /**
+     * @param {T} state
+     */
+    constructor(state: T);
+    /** @type {T} */
+    state: T;
+}
+/**
+ * @template T
+ * @typedef {{
+ *  name: string,
+ *  update?: (prevState: T, newState: T) => T,
+ *  effect?: (prevState: T, newState: T) => void | Promise<void>,
+ * }} Plugin
+ */
+/**
+ * @template T
+ * @extends EventTarget
+ */
+export class State<T> extends EventTarget {
+    /**
+     * @param {T} initialState
+     * @param {Array<{ update: (prevState: T, newState: T) => T }>} [plugins=[]]
+     */
+    constructor(initialState: T, plugins?: {
+        update: (prevState: T, newState: T) => T;
+    }[]);
+    /**
+     * @param {T | ((prevState: T) => T)} state
+     * @param {boolean} [broadcast=true]
+     */
+    setState(state: T | ((prevState: T) => T), broadcast?: boolean): void;
+    /**
+     * @returns {T}
+     */
+    getState(): T;
+    #private;
+}
+export const state: State<{}>;
+export type Plugin<T> = {
+    name: string;
+    update?: (prevState: T, newState: T) => T;
+    effect?: (prevState: T, newState: T) => void | Promise<void>;
+};

package/types/state/index.d.ts

@@ -1,15 +1,48 @@
 /**
  * `'state-changed'` event
+ * @template T
  * @example this.dispatchEvent(new StateEvent(data));
  */
-export class StateEvent extends Event {
-    constructor(state?: {});
-    state: {};
+export class StateEvent<T> extends Event {
+    /**
+     * @param {T} state
+     */
+    constructor(state: T);
+    /** @type {T} */
+    state: T;
 }
-export class State extends EventTarget {
-    constructor(initialState: any);
-    setState(state: any): void;
-    getState(): any;
+/**
+ * @template T
+ * @typedef {{
+ *  name: string,
+ *  update?: (prevState: T, newState: T) => T,
+ *  effect?: (prevState: T, newState: T) => void | Promise<void>,
+ * }} Plugin
+ */
+/**
+ * @template T
+ * @extends EventTarget
+ */
+export class State<T> extends EventTarget {
+    /**
+     * @param {T} initialState
+     * @param {Array<Plugin<T>>} [plugins=[]]
+     */
+    constructor(initialState: T, plugins?: Array<Plugin<T>>);
+    /**
+     * @param {T | ((prevState: T) => T)} state
+     * @param {boolean} [broadcast=true]
+     */
+    setState(state: T | ((prevState: T) => T), broadcast?: boolean): void;
+    /**
+     * @returns {T}
+     */
+    getState(): T;
     #private;
 }
-export const state: State;
+export const state: State<{}>;
+export type Plugin<T> = {
+    name: string;
+    update?: (prevState: T, newState: T) => T;
+    effect?: (prevState: T, newState: T) => void | Promise<void>;
+};