@thepassle/app-tools 0.9.5 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "description": "",
   "type": "module",
   "scripts": {
@@ -51,6 +51,7 @@
       "default": "./utils/*"
     },
     "./env.js": {
+      "types": "./types/env/dev.js",
       "development": "./env/dev.js",
       "default": "./env/prod.js"
     },

package/router/index.js

@@ -79,11 +79,10 @@ export class Router extends EventTarget {
 
   /**
    * @template RenderResult
-   * @returns {RenderResult}
    */
   render() {
-    log(`Rendering route ${this.context.url.pathname}${this.context.url.search}`, { context: this.context, route: this.route });
-    return this.route?.render?.(this.context);
+    log(`Rendering route ${this.context.url.pathname}${this.context.url.search}${this.context.url.hash}`, { context: this.context, route: this.route });
+    return /** @type {RenderResult} */ (this.route?.render?.(this.context));
   }
 
   /**
@@ -107,7 +106,7 @@ export class Router extends EventTarget {
         return route;
       }
     }
-    log(`No route matched for ${url.pathname}${url.search}`, url);
+    log(`No route matched for ${url.pathname}${url.search}${url.hash}`, url);
     return null;
   }
   
@@ -155,6 +154,13 @@ export class Router extends EventTarget {
     this.navigate(url);
   }
 
+  _collectPlugins(route) {
+    return [
+      ...(this.config?.plugins ?? []), 
+      ...(route?.plugins ?? []),
+    ]
+  }
+
   /**
    * @param {string | URL} url The URL to navigate to.
    * @param {{
@@ -166,14 +172,11 @@ export class Router extends EventTarget {
       url = new URL(url, this.baseUrl);
     }
     
-    this.route = this._matchRoute(url) || this._matchRoute(this.fallback);
-    log(`Navigating to ${url.pathname}${url.search}`, { context: this.context, route: this.route });
+    let route = this._matchRoute(url) || this._matchRoute(this.fallback);
+    log(`Navigating to ${url.pathname}${url.search}${url.hash}`, { context: this.context, route: this.route });
 
     /** @type {Plugin[]} */
-    const plugins = [
-      ...(this.config?.plugins ?? []), 
-      ...(this.route?.plugins ?? []), 
-    ];
+    let plugins = this._collectPlugins(route);
 
     for (const plugin of plugins) {
       try {
@@ -182,7 +185,8 @@ export class Router extends EventTarget {
           const condition = await result.condition();
           if (!condition) {
             url = new URL(result.redirect, this.baseUrl);
-            this.route = this._matchRoute(url) || this._matchRoute(this.fallback);
+            route = this._matchRoute(url) || this._matchRoute(this.fallback);
+            plugins = this._collectPlugins(route);
             log('Redirecting', { context: this.context, route: this.route });
           }
         }
@@ -192,6 +196,8 @@ export class Router extends EventTarget {
       }
     }
 
+    this.route = route;
+
     if (!this.route) {
       throw new Error(`[ROUTER] No route or fallback matched for url ${url}`);
     }
@@ -206,7 +212,7 @@ export class Router extends EventTarget {
     }
 
     if (!options.backNav) {
-      window.history.pushState(null, '', `${url.pathname}${url.search}`);
+      window.history.pushState(null, '', `${url.pathname}${url.search}${url.hash}`);
     }
     document.title = this.context.title;
     this._notifyUrlChanged();

package/types/api/types.d.ts

@@ -0,0 +1,34 @@
+export type ResponseType = 'text' | 'json' | 'stream' | 'blob' | 'arrayBuffer' | 'formData' | 'stream';
+export interface Config {
+    plugins?: Plugin[];
+    responseType?: ResponseType;
+    baseURL?: string;
+}
+export type BodyMethod<R> = (url: string, data?: object, opts?: RequestOptions) => Promise<R>;
+export type BodylessMethod<R> = (url: string, opts?: RequestOptions) => Promise<R>;
+export type Method = 'GET' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'POST' | 'PUT' | 'PATCH';
+export interface Plugin {
+    beforeFetch?: (meta: MetaParams) => MetaParams | Promise<MetaParams> | void;
+    afterFetch?: (res: Response) => void | Promise<void> | Response | Promise<Response>;
+    transform?: (data: any) => any;
+    name: string;
+    handleError?: (e: Error) => boolean;
+}
+export interface CustomRequestOptions {
+    transform?: (data: object) => object;
+    responseType?: ResponseType;
+    params?: Record<string, string>;
+    plugins?: Plugin[];
+    baseURL?: string;
+}
+export type RequestOptions = RequestInit & CustomRequestOptions;
+export interface MetaParams {
+    responseType: string;
+    baseURL: string;
+    url: string;
+    method: Method;
+    headers: Headers;
+    opts?: RequestOptions;
+    data?: any;
+    fetchFn: typeof globalThis.fetch;
+}

package/types/dialog/types.d.ts

@@ -0,0 +1,19 @@
+export type DialogNode = HTMLDialogElement & {
+    form: HTMLFormElement;
+};
+export interface DialogCallbacks {
+    opening?: <Parameters>(context: Context) => void;
+    opened?: <Parameters>(context: Context) => void;
+    closing?: (context: Context) => void;
+    closed?: (context: Context) => void;
+}
+export type Config = Record<string, DialogCallbacks>;
+export interface OpenDialogOptions {
+    id: string;
+    parameters?: object;
+}
+export interface Context {
+    dialog: DialogNode | undefined;
+    id: string;
+    parameters?: Record<string, any>;
+}

package/types/router/index.d.ts

@@ -25,7 +25,6 @@ export class Router extends EventTarget {
     get baseUrl(): URL;
     /**
      * @template RenderResult
-     * @returns {RenderResult}
      */
     render<RenderResult>(): RenderResult;
     /**

package/types/router/types.d.ts

@@ -0,0 +1,32 @@
+export interface Config {
+    fallback?: string;
+    plugins?: Plugin[];
+    routes: RouteDefinition[];
+}
+export interface Plugin {
+    name: string;
+    shouldNavigate?: (context: Context) => {
+        redirect: string;
+        condition: () => boolean | (() => Promise<Boolean>);
+    };
+    beforeNavigation?: (context: Context) => void;
+    afterNavigation?: (context: Context) => void;
+}
+export interface Context {
+    title?: string;
+    query: Record<string, string>;
+    params: Record<string, string>;
+    url: URL;
+    [key: string]: any;
+}
+export type Render<RenderResult> = (context: Context) => RenderResult;
+export interface RouteDefinition<RenderResult = unknown> {
+    path: string;
+    title: string | ((context: Partial<Context>) => string);
+    render?: Render<RenderResult>;
+    plugins?: Plugin[];
+}
+/** @TODO URLPattern type */
+export type Route = RouteDefinition & {
+    urlPattern?: any;
+};