@thepassle/app-tools 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepassle/app-tools",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "",
   "type": "module",
   "scripts": {
@@ -10,25 +10,46 @@
     "lint:types:watch": "tsc --watch"
   },
   "exports": {
-    "./state.js": "./state.js",
-    "./pwa.js": "./pwa.js",
-    "./dialog.js": {
-      "types": "./dialog/types.d.ts",
+    "./state.js": { 
+      "types": "./types/state/index.d.ts",
+      "default": "./state.js"
+    },
+    "./pwa.js": { 
+      "types": "./types/pwa/index.d.ts",
+      "default": "./pwa.js"
+    },
+    "./dialog.js": { 
+      "types": "./types/dialog/index.d.ts",
       "default": "./dialog.js"
     },
-    "./pwa/*": "./pwa/*",
-    "./api.js": {
-      "types": "./api/types.d.ts",
+    "./pwa/*": { 
+      "types": "./types/pwa/*",
+      "default": "./pwa/*"
+    },
+    "./api.js": { 
+      "types": "./types/api/index.d.ts",
       "default": "./api.js"
     },
-    "./router.js": {
-      "types": "./router/types.d.ts",
+    "./router.js": { 
+      "types": "./types/router/index.d.ts",
       "default": "./router.js"
     },
-    "./router/plugins/*": "./router/plugins/*",
-    "./api/plugins/*": "./api/plugins/*",
-    "./utils.js": "./utils.js",
-    "./utils/*": "./utils/*",
+    "./router/plugins/*": { 
+      "types": "./types/router/index/*",
+      "default": "./router/plugins/*"
+    },
+    "./api/plugins/*": { 
+      "types": "./types/api/plugins/*",
+      "default": "./api/plugins/*"
+    },
+    "./utils.js": { 
+      "types": "./types/utils/index.d.ts",
+      "default": "./utils.js"
+    },
+    "./utils/*": { 
+      "types": "./types/utils/*",
+      "default": "./utils/*"
+    },
     "./env.js": {
       "development": "./env/dev.js",
       "default": "./env/prod.js"
@@ -36,7 +57,7 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "**/*.d.ts",
+    "./types/**/*.d.ts",
     "./env.js",
     "./pwa.js",
     "./dialog.js",

package/router/index.js

@@ -143,9 +143,9 @@ export class Router extends EventTarget {
 
   /**
    * @param {string | URL} url The URL to navigate to.
-   * @param {@param {{
+   * @param {{
    *    backNav?: 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.
+   *  }} 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.
    */
   async navigate(url, options = {}) {
     if (typeof url === 'string') {

package/types/api/index.d.ts

@@ -0,0 +1,57 @@
+/** @typedef {import('./types.js').Config} Config */
+/** @typedef {import('./types.js').Method} Method */
+/** @typedef {import('./types.js').Plugin} Plugin */
+/** @typedef {import('./types.js').CustomRequestOptions} CustomRequestOptions */
+/** @typedef {import('./types.js').RequestOptions} RequestOptions */
+/** @typedef {import('./types.js').MetaParams} MetaParams */
+/**
+ * @example
+ * const api = new Api({
+ *  baseURL: 'https://api.foo.com/',
+ *  responseType: 'text',
+ *  plugins: [
+ *    {
+ *      beforeFetch: ({url, method, opts, data}) => {},
+ *      afterFetch: (res) => res,
+ *    }
+ *  ]
+ *});
+ */
+export class Api {
+    /** @param {Config} config */
+    constructor(config?: Config);
+    config: {
+        plugins: import("./types.js").Plugin[];
+        responseType: string;
+        baseURL?: string;
+    };
+    /**
+     * @param {string} url
+     * @param {Method} method
+     * @param {RequestOptions} [opts]
+     * @param {object} [data]
+     * @returns
+     */
+    fetch(url: string, method: Method, opts?: RequestOptions, data?: object): Promise<any>;
+    /** @type {import('./types.js').BodylessMethod<object>} */
+    get: import('./types.js').BodylessMethod<object>;
+    /** @type {import('./types.js').BodylessMethod<object>} */
+    options: import('./types.js').BodylessMethod<object>;
+    /** @type {import('./types.js').BodylessMethod<object>} */
+    delete: import('./types.js').BodylessMethod<object>;
+    /** @type {import('./types.js').BodylessMethod<object>} */
+    head: import('./types.js').BodylessMethod<object>;
+    /** @type {import('./types.js').BodyMethod<object>} */
+    post: import('./types.js').BodyMethod<object>;
+    /** @type {import('./types.js').BodyMethod<object>} */
+    put: import('./types.js').BodyMethod<object>;
+    /** @type {import('./types.js').BodyMethod<object>} */
+    patch: import('./types.js').BodyMethod<object>;
+}
+export const api: Api;
+export type Config = import('./types.js').Config;
+export type Method = import('./types.js').Method;
+export type Plugin = import('./types.js').Plugin;
+export type CustomRequestOptions = import('./types.js').CustomRequestOptions;
+export type RequestOptions = import('./types.js').RequestOptions;
+export type MetaParams = import('./types.js').MetaParams;

package/types/api/plugins/abort.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @returns {import('../index').Plugin}
+ */
+export function abortPlugin(): import('../index').Plugin;
+export const abort: import("../types").Plugin;

package/types/api/plugins/cache.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @param {{maxAge?: number}} options
+ * @returns {import('../index').Plugin}
+ */
+export function cachePlugin({ maxAge }?: {
+    maxAge?: number;
+}): import('../index').Plugin;
+export const cache: import("../types").Plugin;

package/types/api/plugins/debounce.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @param {{
+ *  timeout: number
+ * }} opts
+ * @returns {import('../index.js').Plugin}
+ */
+export function debouncePlugin(opts?: {
+    timeout: number;
+}): import('../index.js').Plugin;
+export const debounce: import("../types.js").Plugin;

package/types/api/plugins/delay.d.ts

@@ -0,0 +1,2 @@
+export function delayPlugin(ms: number): import('../index').Plugin;
+export const delay: import("../types").Plugin;

package/types/api/plugins/jsonPrefix.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param {string} jsonPrefix
+ * @returns {import('../index').Plugin}
+ */
+export function jsonPrefixPlugin(jsonPrefix: string): import('../index').Plugin;
+export const jsonPrefix: import("../types").Plugin;

package/types/api/plugins/logger.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @param {{
+ *  collapsed?: boolean
+ * }} options
+ * @returns {import('../index').Plugin}
+ */
+export function loggerPlugin({ collapsed }?: {
+    collapsed?: boolean;
+}): import('../index').Plugin;
+export const logger: import("../types").Plugin;

package/types/api/plugins/mock.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {Response | (() => Response) | (() => Promise<Response>)} response
+ * @returns {import('../index').Plugin}
+ */
+export function mock(response: Response | (() => Response) | (() => Promise<Response>)): import('../index').Plugin;

package/types/api/plugins/xsrf.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @param {{
+ *  xsrfCookieName?: string,
+ *  xsrfHeaderName?: string,
+ * }} options
+ * @returns {import('../index').Plugin}
+ */
+export function xsrfPlugin({ xsrfCookieName, xsrfHeaderName }?: {
+    xsrfCookieName?: string;
+    xsrfHeaderName?: string;
+}): import('../index').Plugin;
+export const xsrf: import("../types").Plugin;

package/types/dialog/events.d.ts

@@ -0,0 +1,8 @@
+export class DialogStateEvent extends Event {
+    /**
+     * @param {'opening' | 'opened' | 'closing' | 'closed'} kind
+     * @param {import('./types.js').Context} context
+     */
+    constructor(kind: 'opening' | 'opened' | 'closing' | 'closed', context: import('./types.js').Context);
+    context: import("./types.js").Context;
+}

package/types/dialog/index.d.ts

@@ -0,0 +1,43 @@
+export class Dialog extends EventTarget {
+    /**
+     *
+     * @param {Config} config
+     */
+    constructor(config: Config);
+    isOpen: boolean;
+    opened: Promise<any>;
+    __resolveOpened: (value: any) => void;
+    closed: Promise<any>;
+    __resolveClosed: (value: any) => void;
+    /** @type {Context} */
+    context: Context;
+    /**
+     * @returns {DialogNode}
+     */
+    __initDialogNode(): DialogNode;
+    __onLightDismiss: ({ target }: {
+        target: any;
+    }) => void;
+    close: (kind?: string) => void;
+    __onDialogClose: () => Promise<void>;
+    __dialog: import("./types.js").DialogNode;
+    /**
+     * @param {OpenDialogOptions} options
+     * @returns
+     */
+    open({ id, parameters }: OpenDialogOptions): Promise<void>;
+    /**
+     * Can be used to modify the dialog
+     *
+     * @example
+     * dialog.modify(node => {node.classList.add('foo')});
+     * @param {(dialog: DialogNode | undefined) => void} cb
+     */
+    modify(cb: (dialog: DialogNode | undefined) => void): void;
+    #private;
+}
+export type DialogNode = import('./types.js').DialogNode;
+export type DialogCallbacks = import('./types.js').DialogCallbacks;
+export type Config = import('./types.js').Config;
+export type OpenDialogOptions = import('./types.js').OpenDialogOptions;
+export type Context = import('./types.js').Context;

package/types/dialog/utils.d.ts

@@ -0,0 +1 @@
+export function setupGlobalDialogStyles(): void;

package/types/env/dev.d.ts

@@ -0,0 +1,2 @@
+export const DEV: true;
+export const PROD: false;

package/types/env/prod.d.ts

@@ -0,0 +1,2 @@
+export const DEV: false;
+export const PROD: true;

package/types/pwa/capabilities.d.ts

@@ -0,0 +1,7 @@
+export namespace capabilities {
+    const WAKELOCK: boolean;
+    const BADGING: boolean;
+    const SHARE: boolean;
+    const SERVICEWORKER: boolean;
+    const NOTIFICATION: boolean;
+}

package/types/pwa/events.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `'installable'` event
+ * @example pwa.dispatchEvent(new InstallableEvent());
+ */
+export class InstallableEvent extends Event {
+    constructor();
+}
+/**
+ * `'installed'` event
+ * @example pwa.dispatchEvent(new InstalledEvent(installed));
+ */
+export class InstalledEvent extends Event {
+    /**
+     * @param {boolean} installed
+     */
+    constructor(installed: boolean);
+    installed: boolean;
+}
+/**
+ * `'update-available'` event
+ * @example pwa.dispatchEvent(new UpdateAvailableEvent());
+ */
+export class UpdateAvailableEvent extends Event {
+    constructor();
+}

package/types/pwa/index.d.ts

@@ -0,0 +1,40 @@
+export type BeforeInstallPromptEvent = Event & {
+    prompt(): Promise<void>;
+    userChoice: Promise<{
+        outcome: 'accepted' | 'dismissed';
+        platform: string;
+    }>;
+};
+export const pwa: Pwa;
+/**
+ * @typedef {Event & {
+ *  prompt(): Promise<void>,
+ *  userChoice: Promise<{
+ *   outcome: 'accepted' | 'dismissed',
+ *   platform: string
+ *  }>
+ * }} BeforeInstallPromptEvent
+ */
+declare class Pwa extends EventTarget {
+    /** @type {boolean} */
+    updateAvailable: boolean;
+    /** @type {boolean} */
+    installable: boolean;
+    /** @type {BeforeInstallPromptEvent  | undefined} */
+    installPrompt: BeforeInstallPromptEvent | undefined;
+    /** @type {ServiceWorker | undefined} */
+    __waitingServiceWorker: ServiceWorker | undefined;
+    isInstalled: boolean;
+    /** Triggers the install prompt, when it's available. You can call this method when the `'installable'` event has fired. */
+    triggerPrompt: () => Promise<void>;
+    /** Update */
+    update: () => void;
+    /**
+     * @param {string} swPath
+     * @param {RegistrationOptions} [opts]
+     * @returns {Promise<ServiceWorkerRegistration> | Promise<void>}
+     */
+    register(swPath: string, opts?: RegistrationOptions): Promise<ServiceWorkerRegistration> | Promise<void>;
+    kill(): Promise<void>;
+}
+export {};

package/types/router/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @typedef {import('./types.js').Plugin} Plugin
+ * @typedef {import('./types.js').Context} Context
+ * @typedef {import('./types.js').RouteDefinition} RouteDefinition
+ * @typedef {import('./types.js').Route} Route
+ * @typedef {import('./types.js').Config} Config
+ */
+export class Router extends EventTarget {
+    /**
+     * @param {Config} config
+     */
+    constructor(config: Config);
+    context: {
+        params: {};
+        query: {};
+        title: string;
+        url: URL;
+    };
+    config: import("./types.js").Config;
+    /** @type {Route[]} */
+    routes: Route[];
+    uninstall(): void;
+    get url(): URL;
+    get fallback(): URL;
+    get baseUrl(): URL;
+    render(): RenderResult;
+    /**
+     * @param {URL} url
+     * @returns {Route | null}
+     */
+    _matchRoute(url: URL): Route | null;
+    _notifyUrlChanged(): void;
+    _onPopState: () => void;
+    _onAnchorClick: (e: any) => void;
+    /**
+     * @param {string | URL} url The URL to navigate to.
+     * @param {{
+     *    backNav?: 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;
+    }): Promise<void>;
+    route: import("./types.js").Route;
+}
+export type Plugin = import('./types.js').Plugin;
+export type Context = import('./types.js').Context;
+export type RouteDefinition = import('./types.js').RouteDefinition;
+export type Route = import('./types.js').Route;
+export type Config = import('./types.js').Config;

package/types/router/plugins/appName.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {string} name
+ * @returns {import('../index.js').Plugin}
+ */
+export function appName(name: string): import('../index.js').Plugin;

package/types/router/plugins/checkServiceWorkerUpdate.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @type {import('../index.js').Plugin}
+ */
+export const checkServiceWorkerUpdate: import('../index.js').Plugin;

package/types/router/plugins/data.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {<Data>(context: import('../index.js').Context) => Promise<Data>} promise
+ * @returns {import('../index.js').Plugin}
+ */
+export function data(promise: <Data>(context: import('../index.js').Context) => Promise<Data>): import('../index.js').Plugin;

package/types/router/plugins/lazy.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @example lazy(() => import('foo'))
+ * @param {any} fn
+ * @returns {import('../index.js').Plugin}
+ */
+export function lazy(fn: any): import('../index.js').Plugin;

package/types/router/plugins/offline.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @example offlinePlugin('/my-offline-page')
+ * @param {string} offlineRoute
+ * @returns {import('../index.js').Plugin}
+ */
+export function offlinePlugin(offlineRoute?: string): import('../index.js').Plugin;
+export const offline: import("../types.js").Plugin;

package/types/router/plugins/redirect.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param {string} path
+ * @returns {import('../index.js').Plugin}
+ */
+export function redirect(path: string): import('../index.js').Plugin;

package/types/router/plugins/resetFocus.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @type {import('../index.js').Plugin}
+ */
+export const resetFocus: import('../index.js').Plugin;

package/types/router/plugins/scrollToTop.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @type {import('../index.js').Plugin}
+ */
+export const scrollToTop: import('../index.js').Plugin;

package/types/state/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `'state-changed'` event
+ * @example this.dispatchEvent(new StateEvent(data));
+ */
+export class StateEvent extends Event {
+    constructor(state?: {});
+    state: {};
+}
+export class State extends EventTarget {
+    constructor(initialState: any);
+    setState(state: any): void;
+    getState(): any;
+    #private;
+}
+export const state: State;

package/types/utils/CONSTANTS.d.ts

@@ -0,0 +1,2 @@
+export const APP_TOOLS: "app-tools";
+export const VERSION: "1.x";

package/types/utils/Service.d.ts

@@ -0,0 +1,23 @@
+export function createService(defaults: any): {
+    new (host: any, promise: any): {
+        host: any;
+        promise: any;
+        state: string;
+        setPromise(promise: any): void;
+        setError(msg: any): void;
+        errorMessage: any;
+        request(params: any): any;
+        data: any;
+        /**
+         * Use states individually, useful if you may need to render stuff in different locations
+         */
+        initialized(templateFn: any): any;
+        pending(templateFn: any): any;
+        success(templateFn: any): any;
+        error(templateFn: any): any;
+        /**
+         * Combined render method, if you want to just render everything in place
+         */
+        render(templates: any): any;
+    };
+};

package/types/utils/async.d.ts

@@ -0,0 +1,29 @@
+export function debounce(f: any, scheduleTask: any, cancelTask: any): (...args: any[]) => void;
+/**
+ * @param {() => void} f
+ * @param {number} ms
+ * @param {{
+ *  signal?: AbortSignal
+ * }} options
+ */
+export function setAbortableTimeout(f: () => void, ms: number, { signal }: {
+    signal?: AbortSignal;
+}): void;
+/**
+ * @param {() => boolean} predicate
+ * @param {{
+ *  timeout?: number,
+ *  message?: string,
+ *  interval?: number
+ * }} options
+ * @returns {Promise<void>}
+ */
+export function waitUntil(predicate: () => boolean, options?: {
+    timeout?: number;
+    message?: string;
+    interval?: number;
+}): Promise<void>;
+export function debounceAtTimeout(f: any, ms: any): (...args: any[]) => void;
+export function debounceAtFrame(f: any): (...args: any[]) => void;
+export function onePaint(): Promise<number>;
+export function animationsComplete(element: HTMLElement): Promise<PromiseSettledResult<Animation>[]>;

package/types/utils/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Syntax sugar to conditionally render a template
+ *
+ * @param {boolean} expression
+ * @param {() => any} trueValue
+ * @param {() => any} [falseValue]
+ * @returns {any | undefined}
+ */
+export function when(expression: boolean, trueValue: () => any, falseValue?: () => any): any | undefined;

package/types/utils/keycodes.d.ts

@@ -0,0 +1,13 @@
+export namespace KEYCODES {
+    const TAB: number;
+    const ENTER: number;
+    const SHIFT: number;
+    const ESC: number;
+    const SPACE: number;
+    const END: number;
+    const HOME: number;
+    const LEFT: number;
+    const UP: number;
+    const RIGHT: number;
+    const DOWN: number;
+}

package/types/utils/log.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @param {boolean} value
+ */
+export function setDebug(value: boolean): void;
+/**
+ * @returns {boolean}
+ */
+export function getDebug(): boolean;
+/**
+ * @param {string} action - describing the action
+ * @param {*} [data] - any js value
+ */
+export function log(action: string, data?: any): void;
+/**
+ * @param {string} title
+ * @returns {(action: string, data?: any) => void}
+ */
+export function createLogger(title: string): (action: string, data?: any) => void;

package/types/utils/media.d.ts

@@ -0,0 +1,37 @@
+export namespace media {
+    namespace MIN {
+        function XXXL(callback: any): boolean | (() => void);
+        function XXL(callback: any): boolean | (() => void);
+        function XL(callback: any): boolean | (() => void);
+        function LG(callback: any): boolean | (() => void);
+        function MD(callback: any): boolean | (() => void);
+        function SM(callback: any): boolean | (() => void);
+        function XS(callback: any): boolean | (() => void);
+        function XXS(callback: any): boolean | (() => void);
+        function XXXS(callback: any): boolean | (() => void);
+    }
+    namespace MAX {
+        export function XXXL_1(callback: any): boolean | (() => void);
+        export { XXXL_1 as XXXL };
+        export function XXL_1(callback: any): boolean | (() => void);
+        export { XXL_1 as XXL };
+        export function XL_1(callback: any): boolean | (() => void);
+        export { XL_1 as XL };
+        export function LG_1(callback: any): boolean | (() => void);
+        export { LG_1 as LG };
+        export function MD_1(callback: any): boolean | (() => void);
+        export { MD_1 as MD };
+        export function SM_1(callback: any): boolean | (() => void);
+        export { SM_1 as SM };
+        export function XS_1(callback: any): boolean | (() => void);
+        export { XS_1 as XS };
+        export function XXS_1(callback: any): boolean | (() => void);
+        export { XXS_1 as XXS };
+        export function XXXS_1(callback: any): boolean | (() => void);
+        export { XXXS_1 as XXXS };
+    }
+    function STANDALONE(callback: any): boolean | (() => void);
+    function REDUCED_MOTION(callback: any): boolean | (() => void);
+    function DARK_MODE(callback: any): boolean | (() => void);
+    function LIGHT_MODE(callback: any): boolean | (() => void);
+}

package/api/types.d.ts

@@ -1,41 +0,0 @@
-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/dialog/types.d.ts

@@ -1,21 +0,0 @@
-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/router/types.d.ts

@@ -1,35 +0,0 @@
-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 {
-  path: string;
-  title: string | ((context: Partial<Context>) => string);
-  render?: Render<RenderResult>;
-  plugins?: Plugin[];
-}
-
-/** @TODO URLPattern type */
-export type Route = RouteDefinition & { urlPattern?: any };